@cube-dev/ui-kit 0.114.0 → 0.115.0

package/es/tasty/styles/preset.js

@@ -1,192 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { parseStyle } from '../utils/styles.js';
-/**
- * Convert a value to CSS, handling numbers as pixels for numeric properties
- */
-function toCSS(value, isNumeric) {
-    if (value == null)
-        return null;
-    if (typeof value === 'number') {
-        return isNumeric ? `${value}px` : String(value);
-    }
-    // Parse through style parser to handle custom units like 1x, 2r, etc.
-    const processed = parseStyle(String(value));
-    return processed.groups[0]?.values[0] || String(value);
-}
-function setCSSValue(styles, styleName, presetName, isPropOnly = false) {
-    styles[`--${styleName}`] = (() => {
-        if (presetName === 'inherit') {
-            return 'inherit';
-        }
-        const defaultValue = `var(--default-${styleName}, ${styleName === 'font-family'
-            ? 'var(--font, NonexistentFontName)'
-            : 'inherit'})`;
-        const fontSuffix = styleName === 'font-family' ? ', var(--font, sans-serif)' : '';
-        if (presetName === 'default') {
-            return `${defaultValue}${fontSuffix}`;
-        }
-        else {
-            return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;
-        }
-    })();
-    if (!isPropOnly) {
-        styles[styleName] = styles[`--${styleName}`];
-    }
-}
-/**
- * Resolve font/fontFamily value to CSS font-family string.
- *
- * - `font="monospace"` → var(--monospace-font)
- * - `font={true}` → var(--font)
- * - `font="CustomFont"` → CustomFont, var(--font)
- * - `fontFamily="Arial"` → Arial (direct, no fallback)
- */
-function resolveFontFamily(font, fontFamily) {
-    // fontFamily takes precedence as a direct value
-    if (fontFamily) {
-        return { value: fontFamily, setVar: false };
-    }
-    if (font == null || font === false) {
-        return null;
-    }
-    if (font === 'monospace') {
-        return { value: 'var(--monospace-font)', setVar: true };
-    }
-    if (font === true) {
-        return { value: 'var(--font)', setVar: true };
-    }
-    return { value: `${font}, var(--font)`, setVar: true };
-}
-/**
- * Handles typography preset and individual font properties.
- *
- * When `preset` is defined, it sets up CSS custom properties for typography.
- * Individual font props can be used with or without `preset`:
- * - With `preset`: overrides the preset value for that property
- * - Without `preset`: outputs the CSS directly
- *
- * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
- * fontWeight accepts numbers directly (e.g., 400, 700).
- *
- * font vs fontFamily:
- * - `font` is the recommended prop with special handling (monospace, boolean, fallback)
- * - `fontFamily` is a direct value without special handling
- */
-export function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, fontFamily, font, }) {
-    const styles = {};
-    const hasPreset = preset != null && preset !== false;
-    // Handle preset if defined
-    if (hasPreset) {
-        let presetValue = preset === true ? '' : String(preset);
-        const processed = parseStyle(presetValue);
-        let { mods } = processed.groups[0] ?? { mods: [] };
-        const isStrong = mods.includes('strong');
-        const isItalic = mods.includes('italic');
-        const isIcon = mods.includes('icon');
-        const isTight = mods.includes('tight');
-        mods = mods.filter((mod) => mod !== 'bold' && mod !== 'italic' && mod !== 'icon' && mod !== 'tight');
-        const name = mods[0] || 'default';
-        // Set preset values for properties not explicitly overridden
-        if (fontSize == null) {
-            setCSSValue(styles, 'font-size', name);
-        }
-        if (lineHeight == null) {
-            setCSSValue(styles, 'line-height', name);
-        }
-        if (letterSpacing == null) {
-            setCSSValue(styles, 'letter-spacing', name);
-        }
-        if (fontWeight == null) {
-            setCSSValue(styles, 'font-weight', name);
-        }
-        if (fontStyle == null) {
-            setCSSValue(styles, 'font-style', name);
-        }
-        if (textTransform == null) {
-            setCSSValue(styles, 'text-transform', name);
-        }
-        if (fontFamily == null && font == null) {
-            setCSSValue(styles, 'font-family', name);
-        }
-        setCSSValue(styles, 'bold-font-weight', name, true);
-        setCSSValue(styles, 'icon-size', name, true);
-        if (isStrong) {
-            styles['font-weight'] = 'var(--bold-font-weight)';
-        }
-        if (isItalic) {
-            styles['font-style'] = 'italic';
-        }
-        if (isIcon) {
-            styles['font-size'] = 'var(--icon-size)';
-            styles['line-height'] = 'var(--icon-size)';
-        }
-        if (isTight) {
-            styles['line-height'] = 'var(--font-size)';
-        }
-    }
-    // Handle individual font properties (work with or without preset)
-    const fontSizeVal = toCSS(fontSize, true);
-    if (fontSizeVal) {
-        styles['font-size'] = fontSizeVal;
-    }
-    const lineHeightVal = toCSS(lineHeight, true);
-    if (lineHeightVal) {
-        styles['line-height'] = lineHeightVal;
-    }
-    const letterSpacingVal = toCSS(letterSpacing, true);
-    if (letterSpacingVal) {
-        styles['letter-spacing'] = letterSpacingVal;
-    }
-    // fontWeight: numbers should NOT get 'px' suffix
-    const fontWeightVal = toCSS(fontWeight, false);
-    if (fontWeightVal) {
-        styles['font-weight'] = fontWeightVal;
-    }
-    // fontStyle: handle boolean (true → italic) and string values
-    if (fontStyle != null) {
-        if (fontStyle === true) {
-            styles['font-style'] = 'italic';
-        }
-        else if (fontStyle !== 'inherit') {
-            styles['font-style'] = fontStyle ? 'italic' : 'normal';
-        }
-        else {
-            styles['font-style'] = 'inherit';
-        }
-    }
-    if (textTransform) {
-        styles['text-transform'] = textTransform;
-    }
-    // Handle font/fontFamily (font has special handling, fontFamily is direct)
-    const fontResult = resolveFontFamily(font, fontFamily);
-    if (fontResult) {
-        styles['font-family'] = fontResult.value;
-        if (fontResult.setVar) {
-            styles['--font-family'] = fontResult.value;
-        }
-    }
-    // Return undefined if no styles to apply
-    if (Object.keys(styles).length === 0) {
-        return;
-    }
-    return styles;
-}
-presetStyle.__lookupStyles = [
-    'preset',
-    'fontSize',
-    'lineHeight',
-    'letterSpacing',
-    'textTransform',
-    'fontWeight',
-    'fontStyle',
-    'fontFamily',
-    'font',
-];
-
-        

package/es/tasty/styles/radius.js

@@ -1,66 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { DIRECTIONS, parseStyle } from '../utils/styles.js';
-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';
-    const processed = parseStyle(radius);
-    let { mods, values } = processed.groups[0] ?? { mods: [], values: [] };
-    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 {
-        'border-radius': values.join(' '),
-    };
-}
-radiusStyle.__lookupStyles = ['radius'];
-
-        

package/es/tasty/styles/reset.js

@@ -1,77 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { parseStyle } from '../utils/styles.js';
-const AUTOFILL_STYLES = {
-    'caret-color': 'var(--primary-color)',
-    '-webkit-text-fill-color': 'var(--primary-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',
-};
-const RESET_MAP = {
-    input: [
-        {
-            '-webkit-appearance': 'none',
-            'word-spacing': 'initial',
-            '-webkit-text-fill-color': 'currentColor',
-        },
-        {
-            $: '::-webkit-search-cancel-button',
-            display: 'none',
-        },
-        {
-            $: ':-webkit-autofill',
-            ...AUTOFILL_STYLES,
-        },
-        {
-            $: ':-webkit-autofill:hover',
-            ...AUTOFILL_STYLES,
-        },
-        {
-            $: ':-webkit-autofill:focus',
-            ...AUTOFILL_STYLES,
-        },
-        {
-            $: '[disabled]',
-            '-webkit-opacity': '1',
-        },
-        {
-            $: '::placeholder',
-            '-webkit-text-fill-color': 'var(--placeholder-color, initial)',
-            color: 'var(--placeholder-color, initial)',
-        },
-        {
-            $: '::-webkit-search-cancel-button',
-            display: 'none',
-            '-webkit-appearance': 'none',
-        },
-    ],
-    button: [
-        {
-            '-webkit-tap-highlight-color': 'transparent',
-        },
-    ],
-};
-export function resetStyle({ reset }) {
-    if (!reset)
-        return;
-    const processed = parseStyle(reset);
-    const { mods } = processed.groups[0] ?? { mods: [] };
-    const result = [];
-    for (const mod of mods) {
-        if (RESET_MAP[mod]) {
-            result.push(...RESET_MAP[mod]);
-        }
-    }
-    return result.length ? result : undefined;
-}
-resetStyle.__lookupStyles = ['reset'];
-
-        

package/es/tasty/styles/scrollbar.js

@@ -1,151 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { parseStyle } from '../utils/styles.js';
-/**
- * Creates cross-browser compatible scrollbar styles
- *
- * Supports both Firefox (scrollbar-width, scrollbar-color) and
- * WebKit/Chromium browsers (::-webkit-scrollbar)
- */
-export function scrollbarStyle({ scrollbar, overflow }) {
-    // Check if scrollbar is defined
-    if (!scrollbar && scrollbar !== 0)
-        return;
-    // Support true as alias for thin
-    const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;
-    const processed = parseStyle(String(value));
-    const { mods, colors, values } = processed.groups[0] ?? { mods: [], colors: [], values: [] };
-    const style = {};
-    // Default colors for scrollbar
-    const defaultThumbColor = 'var(--scrollbar-thumb-color)';
-    const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';
-    // Setup default Firefox scrollbar style
-    style['scrollbar-color'] = `${defaultThumbColor} transparent`;
-    // Default scrollbar size
-    const defaultSize = '8px';
-    const sizeValue = values[0] || defaultSize;
-    // Process modifiers
-    if (mods.includes('thin')) {
-        style['scrollbar-width'] = 'thin';
-    }
-    else if (mods.includes('none')) {
-        style['scrollbar-width'] = 'none';
-        // Remove scrollbar-color as it's not needed when scrollbar is hidden
-        delete style['scrollbar-color'];
-        // Also hide WebKit scrollbars
-        style['&::-webkit-scrollbar'] = {
-            width: '0px',
-            height: '0px',
-            display: 'none',
-        };
-        return style;
-    }
-    else if (mods.includes('auto')) {
-        style['scrollbar-width'] = 'auto';
-    }
-    // Handle scrollbar gutter behavior
-    if (mods.includes('stable') || mods.includes('both-edges')) {
-        // scrollbar-gutter is supported in newer browsers only
-        style['scrollbar-gutter'] = mods.includes('both-edges')
-            ? 'stable both-edges'
-            : 'stable';
-    }
-    // Custom size setup for WebKit
-    if (sizeValue) {
-        style['&::-webkit-scrollbar'] = {
-            ...(style['&::-webkit-scrollbar'] || {}),
-            width: sizeValue,
-            height: sizeValue,
-        };
-    }
-    // Extract colors (support up to 3: thumb, track, corner)
-    // These will be used in various places throughout the function
-    const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;
-    const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;
-    const cornerColor = colors && colors[2] ? colors[2] : trackColor;
-    // Apply colors if they are specified
-    if (colors && colors.length) {
-        // Firefox
-        style['scrollbar-color'] = `${thumbColor} ${trackColor}`;
-        // WebKit - always set these for consistency
-        if (!style['&::-webkit-scrollbar']) {
-            style['&::-webkit-scrollbar'] = {};
-        }
-        style['&::-webkit-scrollbar']['background'] = trackColor;
-        style['&::-webkit-scrollbar-track'] = {
-            ...(style['&::-webkit-scrollbar-track'] || {}),
-            background: trackColor,
-        };
-        style['&::-webkit-scrollbar-thumb'] = {
-            ...(style['&::-webkit-scrollbar-thumb'] || {}),
-            background: thumbColor,
-        };
-        style['&::-webkit-scrollbar-corner'] = {
-            ...(style['&::-webkit-scrollbar-corner'] || {}),
-            background: cornerColor,
-        };
-    }
-    // Handle 'always' mode: force scrollbars to show
-    if (mods.includes('always')) {
-        style['overflow'] = overflow || 'scroll';
-        // Use auto for WebKit browsers since they don't support 'always'
-        // This is closer to the expected behavior
-        if (!style['scrollbar-gutter']) {
-            style['scrollbar-gutter'] = 'stable';
-        }
-        // Ensure scrollbars appear in WebKit even with little content
-        if (!style['&::-webkit-scrollbar']) {
-            style['&::-webkit-scrollbar'] = {};
-        }
-        style['&::-webkit-scrollbar']['display'] = 'block';
-    }
-    // Enhanced 'styled' mode with better transitions and appearance
-    if (mods.includes('styled')) {
-        const baseTransition = [
-            'background var(--transition)',
-            'border-radius var(--transition)',
-            'box-shadow var(--transition)',
-            'width var(--transition)',
-            'height var(--transition)',
-            'border var(--transition)',
-        ].join(', ');
-        // Firefox
-        style['scrollbar-width'] = style['scrollbar-width'] || 'thin';
-        style['scrollbar-color'] =
-            style['scrollbar-color'] || `${defaultThumbColor} ${defaultTrackColor}`;
-        // WebKit
-        style['&::-webkit-scrollbar'] = {
-            width: sizeValue,
-            height: sizeValue,
-            transition: baseTransition,
-            background: defaultTrackColor,
-            ...(style['&::-webkit-scrollbar'] || {}),
-        };
-        style['&::-webkit-scrollbar-thumb'] = {
-            'border-radius': '8px',
-            'min-height': '24px',
-            transition: baseTransition,
-            background: defaultThumbColor,
-            ...(style['&::-webkit-scrollbar-thumb'] || {}),
-        };
-        style['&::-webkit-scrollbar-track'] = {
-            background: defaultTrackColor,
-            transition: baseTransition,
-            ...(style['&::-webkit-scrollbar-track'] || {}),
-        };
-        style['&::-webkit-scrollbar-corner'] = {
-            background: defaultTrackColor,
-            transition: baseTransition,
-            ...(style['&::-webkit-scrollbar-corner'] || {}),
-        };
-    }
-    return style;
-}
-scrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];
-
-        

package/es/tasty/styles/shadow.js

@@ -1,27 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { parseStyle } from '../utils/styles.js';
-function toBoxShadow(shadow) {
-    const processed = parseStyle(shadow);
-    const { values, mods, colors } = processed.groups[0] ?? { values: [], mods: [], colors: [] };
-    const mod = mods[0] || '';
-    const shadowColor = (colors && colors[0]) ?? '';
-    return [mod, ...values, shadowColor].join(' ');
-}
-export function shadowStyle({ shadow }) {
-    if (!shadow)
-        return;
-    if (shadow === true)
-        shadow = 'var(--card-shadow)';
-    return {
-        'box-shadow': shadow.split(',').map(toBoxShadow).join(','),
-    };
-}
-shadowStyle.__lookupStyles = ['shadow'];
-
-        

package/es/tasty/styles/styledScrollbar.js

@@ -1,56 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-/**
- * @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.
- */
-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)',
-        },
-        // Breaks the scrollbar in the latest Chromium browsers
-        // {
-        //   'scrollbar-width': 'thin',
-        //   'scrollbar-color':
-        //     'var(--scrollbar-bg-color) var(--scrollbar-thumb-color)',
-        // },
-    ];
-}
-styledScrollbarStyle.__lookupStyles = ['styledScrollbar'];
-
-