@cube-dev/ui-kit 0.99.3 → 0.101.0

package/es/tasty/styles/inset.js

@@ -1,33 +1,183 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
 import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
-export function insetStyle({ inset }) {
-    if (typeof inset === 'number') {
-        inset = `${inset}px`;
-    }
-    if (!inset)
-        return '';
-    if (inset === true)
-        inset = '0 0 0 0';
-    const processed = parseStyle(inset);
-    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
-    let directions = filterMods(mods, DIRECTIONS);
-    if (!values.length) {
-        values = ['0'];
-    }
-    if (!directions.length) {
-        directions = DIRECTIONS;
-    }
-    return directions.reduce((styles, dir, index) => {
-        styles[dir] = values[index] || values[index % 2] || values[0];
-        return styles;
-    }, {});
+/**
+ * Parse an inset value and return the first processed value
+ */
+function parseInsetValue(value) {
+    if (typeof value === 'number')
+        return `${value}px`;
+    if (!value)
+        return null;
+    if (value === true)
+        value = '0';
+    const { values } = parseStyle(value).groups[0] ?? { values: [] };
+    return values[0] || '0';
+}
+/**
+ * Parse inset value with optional directions (like "1x top" or "2x left right")
+ */
+function parseDirectionalInset(value) {
+    if (typeof value === 'number') {
+        return { values: [`${value}px`], directions: [] };
+    }
+    if (!value)
+        return { values: [], directions: [] };
+    if (value === true)
+        value = '0';
+    const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+    return {
+        values: values.length ? values : ['0'],
+        directions: filterMods(mods, DIRECTIONS),
+    };
+}
+/**
+ * Inset style handler.
+ *
+ * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)
+ * when only individual direction props are specified. This allows CSS cascade to work
+ * correctly when modifiers override only some directions.
+ *
+ * Example problem with using `inset` shorthand everywhere:
+ *   styles: {
+ *     top: { '': 0, 'side=bottom': 'initial' },
+ *     right: { '': 0, 'side=left': 'initial' },
+ *     bottom: { '': 0, 'side=top': 'initial' },
+ *     left: { '': 0, 'side=right': 'initial' },
+ *   }
+ *
+ * If we output `inset` for both cases:
+ *   - Default: inset: 0 0 0 0
+ *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions
+ *
+ * With individual properties:
+ *   - Default: top: 0; right: 0; bottom: 0; left: 0
+ *   - side=bottom: top: initial  ← CORRECT! Only overrides top
+ *
+ * The `inset` shorthand is only used when the base `inset` prop is specified
+ * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).
+ */
+export function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left, }) {
+    // If no props are defined, return empty object
+    if (inset == null &&
+        insetBlock == null &&
+        insetInline == null &&
+        top == null &&
+        right == null &&
+        bottom == null &&
+        left == null) {
+        return {};
+    }
+    // When only individual direction props are used (no inset, insetBlock, insetInline),
+    // output individual CSS properties to allow proper CSS cascade with modifiers
+    const onlyIndividualProps = inset == null && insetBlock == null && insetInline == null;
+    if (onlyIndividualProps) {
+        const result = {};
+        if (top != null) {
+            const val = parseInsetValue(top);
+            if (val)
+                result['top'] = val;
+        }
+        if (right != null) {
+            const val = parseInsetValue(right);
+            if (val)
+                result['right'] = val;
+        }
+        if (bottom != null) {
+            const val = parseInsetValue(bottom);
+            if (val)
+                result['bottom'] = val;
+        }
+        if (left != null) {
+            const val = parseInsetValue(left);
+            if (val)
+                result['left'] = val;
+        }
+        return result;
+    }
+    // When inset, insetBlock, or insetInline is used, use the shorthand approach
+    // Initialize all directions to auto
+    let [topVal, rightVal, bottomVal, leftVal] = ['auto', 'auto', 'auto', 'auto'];
+    // Priority 1 (lowest): inset
+    if (inset != null) {
+        const { values, directions } = parseDirectionalInset(inset);
+        if (values.length) {
+            if (directions.length === 0) {
+                topVal = values[0];
+                rightVal = values[1] || values[0];
+                bottomVal = values[2] || values[0];
+                leftVal = values[3] || values[1] || values[0];
+            }
+            else {
+                for (const dir of directions) {
+                    const idx = DIRECTIONS.indexOf(dir);
+                    const val = values[idx] || values[idx % 2] || values[0];
+                    if (dir === 'top')
+                        topVal = val;
+                    else if (dir === 'right')
+                        rightVal = val;
+                    else if (dir === 'bottom')
+                        bottomVal = val;
+                    else if (dir === 'left')
+                        leftVal = val;
+                }
+            }
+        }
+    }
+    // Priority 2 (medium): insetBlock/insetInline
+    if (insetBlock != null) {
+        const val = parseInsetValue(insetBlock);
+        if (val)
+            topVal = bottomVal = val;
+    }
+    if (insetInline != null) {
+        const val = parseInsetValue(insetInline);
+        if (val)
+            leftVal = rightVal = val;
+    }
+    // Priority 3 (highest): individual directions
+    if (top != null) {
+        const val = parseInsetValue(top);
+        if (val)
+            topVal = val;
+    }
+    if (right != null) {
+        const val = parseInsetValue(right);
+        if (val)
+            rightVal = val;
+    }
+    if (bottom != null) {
+        const val = parseInsetValue(bottom);
+        if (val)
+            bottomVal = val;
+    }
+    if (left != null) {
+        const val = parseInsetValue(left);
+        if (val)
+            leftVal = val;
+    }
+    // Optimize output: 1 value if all same, 2 values if top==bottom && left==right
+    if (topVal === rightVal && rightVal === bottomVal && bottomVal === leftVal) {
+        return { inset: topVal };
+    }
+    if (topVal === bottomVal && leftVal === rightVal) {
+        return { inset: `${topVal} ${leftVal}` };
+    }
+    return { inset: `${topVal} ${rightVal} ${bottomVal} ${leftVal}` };
 }
-insetStyle.__lookupStyles = ['inset'];
+insetStyle.__lookupStyles = [
+    'inset',
+    'insetBlock',
+    'insetInline',
+    'top',
+    'right',
+    'bottom',
+    'left',
+];
 
         

package/es/tasty/styles/justify.js

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

package/es/tasty/styles/list.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
@@ -46,7 +46,7 @@ export const BLOCK_STYLES = [
     ...BLOCK_INNER_STYLES,
     ...BLOCK_OUTER_STYLES,
 ];
-export const COLOR_STYLES = ['color', 'fill', 'fade'];
+export const COLOR_STYLES = ['color', 'fill', 'fade', 'image'];
 export const TEXT_STYLES = [
     'textTransform',
     'fontWeight',

package/es/tasty/styles/margin.js

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

package/es/tasty/styles/outline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
@@ -19,30 +19,57 @@ const BORDER_STYLES = [
     'outset',
 ];
 /**
+ * Generates CSS for outline property with optional offset.
  *
- * @param outline
- * @return {{outline: string}|*}
+ * Syntax:
+ * - `outline="2px solid #red"` - outline only
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
+ * - `outline="2px / 4px"` - width with offset (simpler form)
+ * - `outline={true}` - default 1ow solid outline
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
+ *
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
+ *
+ * @return CSS properties for outline and optionally outline-offset
  */
-export function outlineStyle({ outline }) {
-    if (!outline && outline !== 0)
+export function outlineStyle({ outline, outlineOffset }) {
+    const result = {};
+    // Handle outline (0 is valid - means no outline)
+    if (outline != null && outline !== false) {
+        let outlineValue = outline;
+        if (outline === true)
+            outlineValue = '1ow';
+        if (outline === 0)
+            outlineValue = '0';
+        const processed = parseStyle(String(outlineValue));
+        const group = processed.groups[0];
+        if (group) {
+            const { parts } = group;
+            const outlinePart = parts[0] ?? { values: [], mods: [], colors: [] };
+            const offsetPart = parts[1];
+            const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);
+            const value = outlinePart.values[0] || 'var(--outline-width)';
+            const type = typeMods[0] || 'solid';
+            const outlineColor = outlinePart.colors[0] || 'var(--outline-color)';
+            result['outline'] = [value, type, outlineColor].join(' ');
+            // Check for offset in second part (after /) - takes precedence
+            if (offsetPart?.values[0]) {
+                result['outline-offset'] = offsetPart.values[0];
+            }
+        }
+    }
+    // Handle outlineOffset prop (only if not already set by slash syntax)
+    if (outlineOffset != null && !result['outline-offset']) {
+        const offsetValue = typeof outlineOffset === 'number' ? `${outlineOffset}px` : outlineOffset;
+        const processed = parseStyle(offsetValue);
+        result['outline-offset'] = processed.groups[0]?.values[0] || offsetValue;
+    }
+    // Return undefined if no styles to apply
+    if (Object.keys(result).length === 0) {
         return;
-    if (outline === true)
-        outline = '1ow';
-    const processed = parseStyle(String(outline));
-    const { values, mods, colors } = processed.groups[0] ?? { values: [], mods: [], colors: [] };
-    const typeMods = filterMods(mods, BORDER_STYLES);
-    const value = values[0] || 'var(--outline-width)';
-    const type = typeMods[0] || 'solid';
-    const outlineColor = colors?.[0] || 'var(--outline-color)';
-    const styleValue = [value, type, outlineColor].join(' ');
-    if (values.length > 1) {
-        return {
-            outline: styleValue,
-            'outline-offset': values[1],
-        };
     }
-    return { outline: styleValue };
+    return result;
 }
-outlineStyle.__lookupStyles = ['outline'];
+outlineStyle.__lookupStyles = ['outline', 'outlineOffset'];
 
         

package/es/tasty/styles/padding.js

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

package/es/tasty/styles/place.js

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