@cube-dev/ui-kit 0.99.3 → 0.100.0

package/es/tasty/styles/color.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ import { parseColor } from '../utils/styles.js';
 import { convertColorChainToRgbChain } from './createStyle.js';
 export function colorStyle({ color }) {
     if (!color)
-        return '';
+        return;
     if (color === true)
         color = 'currentColor';
     // Handle color values that need parsing:

package/es/tasty/styles/createStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/dimension.js

@@ -1,83 +1,130 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
 import { parseStyle } from '../utils/styles.js';
 const DEFAULT_MIN_SIZE = 'var(--gap)';
 const DEFAULT_MAX_SIZE = '100%';
+/**
+ * Parse a dimension value (string, number, or boolean) into a CSS value
+ */
+function parseDimensionValue(val) {
+    if (val == null)
+        return null;
+    if (typeof val === 'number')
+        return `${val}px`;
+    if (val === true)
+        return 'initial';
+    const processed = parseStyle(String(val));
+    return processed.groups[0]?.values[0] || null;
+}
+/**
+ * Creates a dimension style handler for width or height.
+ *
+ * Supports:
+ * - Main dimension prop (width/height) with syntax for min/max
+ * - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
+ *
+ * Priority: Individual min/max props override values from main prop syntax
+ */
 export function dimensionStyle(name) {
     const minStyle = `min-${name}`;
     const maxStyle = `max-${name}`;
-    return (val) => {
-        if (val === true) {
-            return {
+    return ({ value, min, max }) => {
+        // If nothing is defined, return undefined
+        if (value == null && min == null && max == null)
+            return;
+        // Handle boolean true on main value - reset all to initial
+        if (value === true) {
+            const styles = {
                 [name]: 'auto',
                 [minStyle]: 'initial',
                 [maxStyle]: 'initial',
             };
+            // Apply individual min/max overrides
+            const minVal = parseDimensionValue(min);
+            const maxVal = parseDimensionValue(max);
+            if (minVal)
+                styles[minStyle] = minVal;
+            if (maxVal)
+                styles[maxStyle] = maxVal;
+            return styles;
         }
-        if (val == null)
-            return '';
-        if (typeof val === 'number') {
-            val = `${val}px`;
-        }
-        val = String(val);
         const styles = {
             [name]: 'auto',
             [minStyle]: 'initial',
             [maxStyle]: 'initial',
         };
-        const processed = parseStyle(val);
-        const { mods, values } = processed.groups[0] ?? { mods: [], values: [] };
-        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;
-                case 'fixed': {
-                    // Fixed modifier: set all three dimensions to the same value
-                    const fixedValue = values[0] || 'max-content';
-                    styles[minStyle] = fixedValue;
-                    styles[name] = fixedValue;
-                    styles[maxStyle] = fixedValue;
-                    flag = true;
-                    break;
-                }
-                default:
-                    break;
-            }
-        }
-        if (!flag || !mods.length) {
-            if (values.length === 2) {
-                styles[minStyle] = values[0];
-                styles[maxStyle] = values[1];
+        // Process main dimension value
+        if (value != null) {
+            let val = value;
+            if (typeof val === 'number') {
+                val = `${val}px`;
             }
-            else if (values.length === 3) {
-                styles[minStyle] = values[0];
-                styles[name] = values[1];
-                styles[maxStyle] = values[2];
-            }
-            else {
-                styles[name] = values[0] || 'auto';
+            val = String(val);
+            const processed = parseStyle(val);
+            const { mods, values } = processed.groups[0] ?? { mods: [], values: [] };
+            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;
+                    case 'fixed': {
+                        // Fixed modifier: set all three dimensions to the same value
+                        const fixedValue = values[0] || 'max-content';
+                        styles[minStyle] = fixedValue;
+                        styles[name] = fixedValue;
+                        styles[maxStyle] = fixedValue;
+                        flag = true;
+                        break;
+                    }
+                    default:
+                        break;
+                }
             }
-        }
-        if (styles[name] === 'stretch') {
-            if (name === 'width') {
-                styles[name] = ['stretch', '-webkit-fill-available', '-moz-available'];
+            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';
+                }
             }
-            else {
-                styles[name] = 'auto';
+            if (styles[name] === 'stretch') {
+                if (name === 'width') {
+                    styles[name] = [
+                        'stretch',
+                        '-webkit-fill-available',
+                        '-moz-available',
+                    ];
+                }
+                else {
+                    styles[name] = 'auto';
+                }
             }
         }
+        // Apply individual min/max props (higher priority, override main prop syntax)
+        const minVal = parseDimensionValue(min);
+        const maxVal = parseDimensionValue(max);
+        if (minVal)
+            styles[minStyle] = minVal;
+        if (maxVal)
+            styles[maxStyle] = maxVal;
         return styles;
     };
 }

package/es/tasty/styles/display.js

@@ -1,13 +1,93 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
-export function displayStyle({ display, hide }) {
-    return { display: !hide ? display : 'none' };
+import { parseStyle } from '../utils/styles.js';
+/**
+ * Handles display, hide, textOverflow, overflow, and whiteSpace styles.
+ *
+ * textOverflow syntax:
+ * - `textOverflow="ellipsis"` - single-line truncation with ellipsis
+ * - `textOverflow="ellipsis / 3"` - multi-line clamping (3 lines) with ellipsis
+ * - `textOverflow="clip"` - single-line truncation with clip (no ellipsis)
+ * - `textOverflow="clip / 2"` - multi-line clip (2 lines)
+ * - `textOverflow={true}` or `textOverflow="initial"` - reset to initial
+ *
+ * Priority:
+ * 1. `hide` takes precedence (display: none)
+ * 2. Multi-line `textOverflow` forces display: -webkit-box
+ * 3. Single-line `textOverflow` forces white-space: nowrap and overflow: hidden
+ */
+export function displayStyle({ display, hide, textOverflow, overflow, whiteSpace, }) {
+    const result = {};
+    // Handle textOverflow first to determine required overrides
+    if (textOverflow != null && textOverflow !== false) {
+        // Boolean true or 'initial' → reset to initial
+        if (textOverflow === true || textOverflow === 'initial') {
+            result['text-overflow'] = 'initial';
+        }
+        else {
+            const processed = parseStyle(String(textOverflow));
+            const group = processed.groups[0];
+            if (group) {
+                const { parts } = group;
+                const modePart = parts[0];
+                const clampPart = parts[1];
+                const hasEllipsis = modePart?.mods.includes('ellipsis');
+                const hasClip = modePart?.mods.includes('clip');
+                // Get clamp value from second part (after /)
+                let clamp = 1;
+                if (clampPart?.values[0]) {
+                    const parsed = parseInt(clampPart.values[0], 10);
+                    if (!isNaN(parsed) && parsed > 0) {
+                        clamp = parsed;
+                    }
+                }
+                if (hasEllipsis || hasClip) {
+                    result['overflow'] = 'hidden';
+                    result['text-overflow'] = hasEllipsis ? 'ellipsis' : 'clip';
+                    if (clamp === 1) {
+                        result['white-space'] = 'nowrap';
+                    }
+                    else {
+                        result['display'] = '-webkit-box';
+                        result['-webkit-box-orient'] = 'vertical';
+                        result['-webkit-line-clamp'] = clamp;
+                        result['line-clamp'] = clamp;
+                    }
+                }
+            }
+        }
+    }
+    // Apply user-specified values (only if not overridden by textOverflow)
+    if (overflow && !result['overflow']) {
+        result['overflow'] = overflow;
+    }
+    if (whiteSpace && !result['white-space']) {
+        result['white-space'] = whiteSpace;
+    }
+    // Handle display (hide > textOverflow > user value)
+    if (hide) {
+        result['display'] = 'none';
+    }
+    else if (!result['display'] && display) {
+        result['display'] = display;
+    }
+    // Return undefined if no styles to apply
+    if (Object.keys(result).length === 0) {
+        return;
+    }
+    return result;
 }
-displayStyle.__lookupStyles = ['display', 'hide'];
+displayStyle.__lookupStyles = [
+    'display',
+    'hide',
+    'textOverflow',
+    'overflow',
+    'whiteSpace',
+];
 
         

package/es/tasty/styles/fade.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
@@ -12,25 +12,58 @@ const DIRECTION_MAP = {
     top: 'to bottom',
     bottom: 'to top',
 };
-export function fadeStyle({ fade }) {
-    if (!fade)
-        return '';
-    const processed = parseStyle(fade);
-    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
+// Default mask colors (standard black with alpha for gradient masks)
+const DEFAULT_TRANSPARENT_COLOR = 'rgb(0 0 0 / 0)';
+const DEFAULT_OPAQUE_COLOR = 'rgb(0 0 0 / 1)';
+/**
+ * Process a single group and return gradient strings for its directions.
+ */
+function processGroup(group, isOnlyGroup) {
+    let { values, mods, colors } = group;
     let directions = filterMods(mods, DIRECTIONS);
     if (!values.length) {
         values = ['var(--fade-width)'];
     }
+    // If this is the only group and no directions specified, apply to all edges
     if (!directions.length) {
-        directions = ['top', 'right', 'bottom', 'left'];
+        if (isOnlyGroup) {
+            directions = ['top', 'right', 'bottom', 'left'];
+        }
+        else {
+            // For multi-group without explicit direction, skip this group
+            return [];
+        }
+    }
+    // Extract colors: first = transparent mask color, second = opaque mask color
+    const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;
+    const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;
+    return directions.map((direction, index) => {
+        const size = values[index] || values[index % 2] || values[0];
+        return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;
+    });
+}
+export function fadeStyle({ fade }) {
+    if (!fade)
+        return;
+    const processed = parseStyle(fade);
+    const groups = processed.groups ?? [];
+    if (!groups.length)
+        return;
+    const isOnlyGroup = groups.length === 1;
+    // Process all groups and collect gradients
+    const gradients = [];
+    for (const group of groups) {
+        const groupGradients = processGroup({
+            values: group.values ?? [],
+            mods: group.mods ?? [],
+            colors: group.colors ?? [],
+        }, isOnlyGroup);
+        gradients.push(...groupGradients);
     }
+    if (!gradients.length)
+        return;
     return {
-        mask: directions
-            .map((direction, index) => {
-            const size = values[index] || values[index % 2] || values[0];
-            return `linear-gradient(${DIRECTION_MAP[direction]}, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 1) ${size})`;
-        })
-            .join(', '),
+        mask: gradients.join(', '),
         'mask-composite': 'intersect',
     };
 }

package/es/tasty/styles/fill.js

@@ -1,22 +1,71 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
 import { parseStyle } from '../utils/styles.js';
-export function fillStyle({ fill }) {
-    if (!fill)
-        return '';
-    const processed = parseStyle(fill);
-    fill = processed.groups[0]?.colors[0] || fill;
-    return { 'background-color': fill };
+export function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip, background, }) {
+    // If background is set, it overrides everything
+    if (background) {
+        const processed = parseStyle(background);
+        return { background: processed.output || background };
+    }
+    const result = {};
+    // Priority: backgroundColor > fill
+    const colorValue = backgroundColor ?? fill;
+    if (colorValue) {
+        const parsed = parseStyle(colorValue);
+        result['background-color'] = parsed.groups[0]?.colors[0] || colorValue;
+    }
+    // Priority: backgroundImage > image
+    const imageValue = backgroundImage ?? image;
+    if (imageValue) {
+        const parsed = parseStyle(imageValue);
+        result['background-image'] = parsed.output || imageValue;
+    }
+    // Other background properties (pass through with parseStyle for token support)
+    if (backgroundPosition) {
+        result['background-position'] =
+            parseStyle(backgroundPosition).output || backgroundPosition;
+    }
+    if (backgroundSize) {
+        result['background-size'] =
+            parseStyle(backgroundSize).output || backgroundSize;
+    }
+    if (backgroundRepeat) {
+        result['background-repeat'] = backgroundRepeat;
+    }
+    if (backgroundAttachment) {
+        result['background-attachment'] = backgroundAttachment;
+    }
+    if (backgroundOrigin) {
+        result['background-origin'] = backgroundOrigin;
+    }
+    if (backgroundClip) {
+        result['background-clip'] = backgroundClip;
+    }
+    if (Object.keys(result).length === 0)
+        return;
+    return result;
 }
-fillStyle.__lookupStyles = ['fill'];
+fillStyle.__lookupStyles = [
+    'fill',
+    'backgroundColor',
+    'image',
+    'backgroundImage',
+    'backgroundPosition',
+    'backgroundSize',
+    'backgroundRepeat',
+    'backgroundAttachment',
+    'backgroundOrigin',
+    'backgroundClip',
+    'background',
+];
 export function svgFillStyle({ svgFill }) {
     if (!svgFill)
-        return '';
+        return;
     const processed = parseStyle(svgFill);
     svgFill = processed.groups[0]?.colors[0] || svgFill;
     return { fill: svgFill };

package/es/tasty/styles/flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/gap.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/height.js

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
 import { dimensionStyle } from './dimension.js';
 const dimension = dimensionStyle('height');
-export function heightStyle({ height }) {
-    return dimension(height);
+export function heightStyle({ height, minHeight, maxHeight, }) {
+    return dimension({ value: height, min: minHeight, max: maxHeight });
 }
-heightStyle.__lookupStyles = ['height'];
+heightStyle.__lookupStyles = ['height', 'minHeight', 'maxHeight'];
 
         

package/es/tasty/styles/index.js

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.100.0
  * Released under the MIT license.
  */
 
-import { predefine } from './predefined.js';
+import { predefine, styleHandlers } from './predefined.js';
 const { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();
-export { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };
+export { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias, styleHandlers, };
 export * from './createStyle.js';
+export { normalizeHandlerDefinition, registerHandler, resetHandlers, validateHandlerResult, } from './predefined.js';