@cube-dev/ui-kit 0.0.0-canary-8ca04ef → 0.0.0-canary-dae9b2f

package/es/tasty/styles/margin.js

@@ -1,26 +1,31 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
+import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
 /**
- * Parse a margin value and return the first processed value
+ * Parse a margin value and return processed values
  */
 function parseMarginValue(value) {
-    if (typeof value === 'number')
-        return `${value}px`;
+    if (typeof value === 'number') {
+        return [`${value}px`];
+    }
     if (!value)
-        return null;
+        return [];
     if (value === true)
         value = '1x';
-    const { values } = parseStyle(value).groups[0] ?? { values: [] };
-    return values[0] || 'var(--gap)';
+    const processed = parseStyle(value);
+    let { values } = processed.groups[0] ?? { values: [] };
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    return values;
 }
 /**
- * Parse margin value with optional directions (like "1x top" or "2x left right")
+ * Parse directional margin value (like "1x top" or "2x left right")
  */
 function parseDirectionalMargin(value) {
     if (typeof value === 'number') {
@@ -30,91 +35,66 @@ function parseDirectionalMargin(value) {
         return { values: [], directions: [] };
     if (value === true)
         value = '1x';
-    const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
-    return {
-        values: values.length ? values : ['var(--gap)'],
-        directions: filterMods(mods, DIRECTIONS),
-    };
+    const processed = parseStyle(value);
+    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    const directions = filterMods(mods, DIRECTIONS);
+    return { values, directions };
 }
 export function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft, }) {
-    // If no margin is defined, return empty object
-    if (margin == null &&
-        marginBlock == null &&
-        marginInline == null &&
-        marginTop == null &&
-        marginRight == null &&
-        marginBottom == null &&
-        marginLeft == null) {
-        return {};
-    }
-    // Initialize all directions to 0
-    let [top, right, bottom, left] = ['0', '0', '0', '0'];
-    // Priority 1 (lowest): margin
+    const styles = {};
+    // Priority 1 (lowest): margin - apply to all directions if no other properties are specified
     if (margin != null) {
+        // Parse directional margin (e.g., "1x top" or "2x left right")
         const { values, directions } = parseDirectionalMargin(margin);
-        if (values.length) {
-            if (directions.length === 0) {
-                top = values[0];
-                right = values[1] || values[0];
-                bottom = values[2] || values[0];
-                left = 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')
-                        top = val;
-                    else if (dir === 'right')
-                        right = val;
-                    else if (dir === 'bottom')
-                        bottom = val;
-                    else if (dir === 'left')
-                        left = val;
-                }
-            }
+        if (directions.length === 0) {
+            // No directions specified, apply to all sides
+            styles['margin-top'] = values[0];
+            styles['margin-right'] = values[1] || values[0];
+            styles['margin-bottom'] = values[2] || values[0];
+            styles['margin-left'] = values[3] || values[1] || values[0];
+        }
+        else {
+            // Apply only to specified directions
+            directions.forEach((dir) => {
+                const index = DIRECTIONS.indexOf(dir);
+                styles[`margin-${dir}`] =
+                    values[index] || values[index % 2] || values[0];
+            });
         }
     }
-    // Priority 2 (medium): marginBlock/marginInline
+    // Priority 2 (medium): marginBlock - override top and bottom
     if (marginBlock != null) {
-        const val = parseMarginValue(marginBlock);
-        if (val)
-            top = bottom = val;
+        const values = parseMarginValue(marginBlock);
+        styles['margin-top'] = values[0];
+        styles['margin-bottom'] = values[1] || values[0];
     }
+    // Priority 2 (medium): marginInline - override left and right
     if (marginInline != null) {
-        const val = parseMarginValue(marginInline);
-        if (val)
-            left = right = val;
+        const values = parseMarginValue(marginInline);
+        styles['margin-left'] = values[0];
+        styles['margin-right'] = values[1] || values[0];
     }
-    // Priority 3 (highest): individual directions
+    // Priority 3 (highest): individual directions - override specific sides
     if (marginTop != null) {
-        const val = parseMarginValue(marginTop);
-        if (val)
-            top = val;
+        const values = parseMarginValue(marginTop);
+        styles['margin-top'] = values[0];
     }
     if (marginRight != null) {
-        const val = parseMarginValue(marginRight);
-        if (val)
-            right = val;
+        const values = parseMarginValue(marginRight);
+        styles['margin-right'] = values[0];
     }
     if (marginBottom != null) {
-        const val = parseMarginValue(marginBottom);
-        if (val)
-            bottom = val;
+        const values = parseMarginValue(marginBottom);
+        styles['margin-bottom'] = values[0];
     }
     if (marginLeft != null) {
-        const val = parseMarginValue(marginLeft);
-        if (val)
-            left = val;
-    }
-    // Optimize output: 1 value if all same, 2 values if top==bottom && left==right
-    if (top === right && right === bottom && bottom === left) {
-        return { margin: top };
-    }
-    if (top === bottom && left === right) {
-        return { margin: `${top} ${left}` };
+        const values = parseMarginValue(marginLeft);
+        styles['margin-left'] = values[0];
     }
-    return { margin: `${top} ${right} ${bottom} ${left}` };
+    return styles;
 }
 marginStyle.__lookupStyles = [
     'margin',

package/es/tasty/styles/outline.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { filterMods, parseStyle } from '../utils/styles.js';
+import { filterMods, parseStyle } from '../utils/styles';
 const BORDER_STYLES = [
     'none',
     'hidden',

package/es/tasty/styles/padding.js

@@ -1,26 +1,31 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
+import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
 /**
- * Parse a padding value and return the first processed value
+ * Parse a padding value and return processed values
  */
 function parsePaddingValue(value) {
-    if (typeof value === 'number')
-        return `${value}px`;
+    if (typeof value === 'number') {
+        return [`${value}px`];
+    }
     if (!value)
-        return null;
+        return [];
     if (value === true)
         value = '1x';
-    const { values } = parseStyle(value).groups[0] ?? { values: [] };
-    return values[0] || 'var(--gap)';
+    const processed = parseStyle(value);
+    let { values } = processed.groups[0] ?? { values: [] };
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    return values;
 }
 /**
- * Parse padding value with optional directions (like "1x top" or "2x left right")
+ * Parse directional padding value (like "1x top" or "2x left right")
  */
 function parseDirectionalPadding(value) {
     if (typeof value === 'number') {
@@ -30,91 +35,66 @@ function parseDirectionalPadding(value) {
         return { values: [], directions: [] };
     if (value === true)
         value = '1x';
-    const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
-    return {
-        values: values.length ? values : ['var(--gap)'],
-        directions: filterMods(mods, DIRECTIONS),
-    };
+    const processed = parseStyle(value);
+    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    const directions = filterMods(mods, DIRECTIONS);
+    return { values, directions };
 }
 export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
-    // If no padding is defined, return empty object
-    if (padding == null &&
-        paddingBlock == null &&
-        paddingInline == null &&
-        paddingTop == null &&
-        paddingRight == null &&
-        paddingBottom == null &&
-        paddingLeft == null) {
-        return {};
-    }
-    // Initialize all directions to 0
-    let [top, right, bottom, left] = ['0', '0', '0', '0'];
-    // Priority 1 (lowest): padding
+    const styles = {};
+    // Priority 1 (lowest): padding - apply to all directions if no other properties are specified
     if (padding != null) {
+        // Parse directional padding (e.g., "1x top" or "2x left right")
         const { values, directions } = parseDirectionalPadding(padding);
-        if (values.length) {
-            if (directions.length === 0) {
-                top = values[0];
-                right = values[1] || values[0];
-                bottom = values[2] || values[0];
-                left = 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')
-                        top = val;
-                    else if (dir === 'right')
-                        right = val;
-                    else if (dir === 'bottom')
-                        bottom = val;
-                    else if (dir === 'left')
-                        left = val;
-                }
-            }
+        if (directions.length === 0) {
+            // No directions specified, apply to all sides
+            styles['padding-top'] = values[0];
+            styles['padding-right'] = values[1] || values[0];
+            styles['padding-bottom'] = values[2] || values[0];
+            styles['padding-left'] = values[3] || values[1] || values[0];
+        }
+        else {
+            // Apply only to specified directions
+            directions.forEach((dir) => {
+                const index = DIRECTIONS.indexOf(dir);
+                styles[`padding-${dir}`] =
+                    values[index] || values[index % 2] || values[0];
+            });
         }
     }
-    // Priority 2 (medium): paddingBlock/paddingInline
+    // Priority 2 (medium): paddingBlock - override top and bottom
     if (paddingBlock != null) {
-        const val = parsePaddingValue(paddingBlock);
-        if (val)
-            top = bottom = val;
+        const values = parsePaddingValue(paddingBlock);
+        styles['padding-top'] = values[0];
+        styles['padding-bottom'] = values[1] || values[0];
     }
+    // Priority 2 (medium): paddingInline - override left and right
     if (paddingInline != null) {
-        const val = parsePaddingValue(paddingInline);
-        if (val)
-            left = right = val;
+        const values = parsePaddingValue(paddingInline);
+        styles['padding-left'] = values[0];
+        styles['padding-right'] = values[1] || values[0];
     }
-    // Priority 3 (highest): individual directions
+    // Priority 3 (highest): individual directions - override specific sides
     if (paddingTop != null) {
-        const val = parsePaddingValue(paddingTop);
-        if (val)
-            top = val;
+        const values = parsePaddingValue(paddingTop);
+        styles['padding-top'] = values[0];
     }
     if (paddingRight != null) {
-        const val = parsePaddingValue(paddingRight);
-        if (val)
-            right = val;
+        const values = parsePaddingValue(paddingRight);
+        styles['padding-right'] = values[0];
     }
     if (paddingBottom != null) {
-        const val = parsePaddingValue(paddingBottom);
-        if (val)
-            bottom = val;
+        const values = parsePaddingValue(paddingBottom);
+        styles['padding-bottom'] = values[0];
     }
     if (paddingLeft != null) {
-        const val = parsePaddingValue(paddingLeft);
-        if (val)
-            left = val;
-    }
-    // Optimize output: 1 value if all same, 2 values if top==bottom && left==right
-    if (top === right && right === bottom && bottom === left) {
-        return { padding: top };
-    }
-    if (top === bottom && left === right) {
-        return { padding: `${top} ${left}` };
+        const values = parsePaddingValue(paddingLeft);
+        styles['padding-left'] = values[0];
     }
-    return { padding: `${top} ${right} ${bottom} ${left}` };
+    return styles;
 }
 paddingStyle.__lookupStyles = [
     'padding',

package/es/tasty/styles/place.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 

package/es/tasty/styles/predefined.js

@@ -1,36 +1,36 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { alignStyle } from './align.js';
-import { borderStyle } from './border.js';
-import { colorStyle } from './color.js';
-import { createStyle } from './createStyle.js';
-import { displayStyle } from './display.js';
-import { fadeStyle } from './fade.js';
-import { fillStyle, svgFillStyle } from './fill.js';
-import { flowStyle } from './flow.js';
-import { fontStyle } from './font.js';
-import { fontStyleStyle } from './fontStyle.js';
-import { gapStyle } from './gap.js';
-import { groupRadiusAttr } from './groupRadius.js';
-import { heightStyle } from './height.js';
-import { insetStyle } from './inset.js';
-import { justifyStyle } from './justify.js';
-import { marginStyle } from './margin.js';
-import { outlineStyle } from './outline.js';
-import { paddingStyle } from './padding.js';
-import { presetStyle } from './preset.js';
-import { radiusStyle } from './radius.js';
-import { resetStyle } from './reset.js';
-import { scrollbarStyle } from './scrollbar.js';
-import { shadowStyle } from './shadow.js';
-import { styledScrollbarStyle } from './styledScrollbar.js';
-import { transitionStyle } from './transition.js';
-import { widthStyle } from './width.js';
+import { alignStyle } from './align';
+import { borderStyle } from './border';
+import { colorStyle } from './color';
+import { createStyle } from './createStyle';
+import { displayStyle } from './display';
+import { fadeStyle } from './fade';
+import { fillStyle } from './fill';
+import { flowStyle } from './flow';
+import { fontStyle } from './font';
+import { fontStyleStyle } from './fontStyle';
+import { gapStyle } from './gap';
+import { groupRadiusAttr } from './groupRadius';
+import { heightStyle } from './height';
+import { insetStyle } from './inset';
+import { justifyStyle } from './justify';
+import { marginStyle } from './margin';
+import { outlineStyle } from './outline';
+import { paddingStyle } from './padding';
+import { presetStyle } from './preset';
+import { radiusStyle } from './radius';
+import { resetStyle } from './reset';
+import { scrollbarStyle } from './scrollbar';
+import { shadowStyle } from './shadow';
+import { styledScrollbarStyle } from './styledScrollbar';
+import { transitionStyle } from './transition';
+import { widthStyle } from './width';
 const numberConverter = (val) => {
     if (typeof val === 'number') {
         return `${val}px`;
@@ -128,7 +128,6 @@ export function predefine() {
         transitionStyle,
         resetStyle,
         fillStyle,
-        svgFillStyle,
         widthStyle,
         marginStyle,
         gapStyle,

package/es/tasty/styles/preset.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles.js';
+import { parseStyle } from '../utils/styles';
 function setCSSValue(styles, styleName, presetName, isPropOnly = false) {
     styles[`--${styleName}`] = (() => {
         if (presetName === 'inherit') {

package/es/tasty/styles/radius.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, parseStyle } from '../utils/styles.js';
+import { DIRECTIONS, parseStyle } from '../utils/styles';
 const PROP = 'var(--radius)';
 const SHARP = 'var(--leaf-sharp-radius)';
 export function radiusStyle({ radius }) {
@@ -57,9 +57,16 @@ export function radiusStyle({ radius }) {
             values = arr;
         }
     }
-    return {
-        'border-radius': values.join(' '),
-    };
+    return [
+        {
+            '--local-radius': values.join(' '),
+            'border-radius': 'var(--local-radius)',
+        },
+        {
+            $: '>*',
+            '--context-radius': values.join(' '),
+        },
+    ];
 }
 radiusStyle.__lookupStyles = ['radius'];
 

package/es/tasty/styles/reset.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles.js';
+import { parseStyle } from '../utils/styles';
 const AUTOFILL_STYLES = {
     'caret-color': 'var(--purple-color)',
     '-webkit-text-fill-color': 'var(--purple-color)',
@@ -45,7 +45,7 @@ const RESET_MAP = {
         {
             $: '::placeholder',
             '-webkit-text-fill-color': 'var(--local-placeholder-color)',
-            color: 'var(--placeholder-color, rgb(var(--dark-color-rgb) / .3))',
+            color: 'var(--local-placeholder-color)',
             filter: 'saturate(.33)',
         },
         {
@@ -53,6 +53,10 @@ const RESET_MAP = {
             display: 'none',
             '-webkit-appearance': 'none',
         },
+        {
+            $: ':not([disabled])::placeholder',
+            '--local-placeholder-color': 'var(--placeholder-color, rgb(var(--dark-color-rgb) / .3))',
+        },
     ],
     button: [
         {

package/es/tasty/styles/scrollbar.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles.js';
+import { parseStyle } from '../utils/styles';
 /**
  * Creates cross-browser compatible scrollbar styles
  *

package/es/tasty/styles/shadow.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles.js';
+import { parseStyle } from '../utils/styles';
 function toBoxShadow(shadow) {
     const processed = parseStyle(shadow);
     const { values, mods, colors } = processed.groups[0] ?? { values: [], mods: [], colors: [] };

package/es/tasty/styles/styledScrollbar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 

package/es/tasty/styles/transition.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles.js';
+import { parseStyle } from '../utils/styles';
 const MAP = {
     fade: ['mask'],
     translate: ['transform', 'translate'],
@@ -88,14 +88,7 @@ export function transitionStyle({ transition }) {
     });
     const result = Object.entries(map)
         .map(([style, [name, easing, timing, delay]]) => {
-        let value = `${style} ${timing || getTiming(name)}`;
-        if (easing || delay) {
-            value += ` ${easing || DEFAULT_EASING}`;
-        }
-        if (delay) {
-            value += ` ${delay}`;
-        }
-        return value;
+        return `${style}  ${timing || getTiming(name)} ${easing || DEFAULT_EASING} ${delay || '0s'}`;
     })
         .join(', ');
     return { transition: result };

package/es/tasty/styles/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 

package/es/tasty/styles/width.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { dimensionStyle } from './dimension.js';
+import { dimensionStyle } from './dimension';
 const dimension = dimensionStyle('width');
 export function widthStyle({ width }) {
     return dimension(width);