@cube-dev/ui-kit 0.0.0-canary-8eb1690 → 0.0.0-canary-3efb91b

package/es/tasty/styles/inset.js

@@ -1,33 +1,129 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * 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),
+    };
+}
+export function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left, }) {
+    // If no inset is defined, return empty object
+    if (inset == null &&
+        insetBlock == null &&
+        insetInline == null &&
+        top == null &&
+        right == null &&
+        bottom == null &&
+        left == null) {
+        return {};
+    }
+    // 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.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * 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.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * Released under the MIT license.
  */
 

package/es/tasty/styles/margin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * 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.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * Released under the MIT license.
  */
 
@@ -19,30 +19,55 @@ 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
+    if (outline) {
+        let outlineValue = outline;
+        if (outline === true)
+            outlineValue = '1ow';
+        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.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * 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.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * Released under the MIT license.
  */
 

package/es/tasty/styles/predefined.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * Released under the MIT license.
  */
 
@@ -14,10 +14,9 @@ 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';
+// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed
+// Both font and fontStyle props are now handled by presetStyle
 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';
@@ -114,34 +113,6 @@ export function defineStyleAlias(styleName, cssStyleName, converter) {
     STYLE_HANDLER_MAP[styleName].push(styleHandler);
 }
 export function predefine() {
-    // Manually define styles that are used in other custom styles.
-    // Otherwise, they won't be handled as expected.
-    defineStyleAlias('fontSize', 'font-size', numberConverter);
-    defineStyleAlias('lineHeight', 'line-height', numberConverter);
-    defineStyleAlias('fontWeight', 'font-weight', numberConverter);
-    defineStyleAlias('fontStyle');
-    defineStyleAlias('letterSpacing', 'letter-spacing', numberConverter);
-    defineStyleAlias('textTransform');
-    defineStyleAlias('fontFamily');
-    defineStyleAlias('overflow');
-    defineStyleAlias('paddingTop', 'padding-top', numberConverter);
-    defineStyleAlias('paddingRight', 'padding-right', numberConverter);
-    defineStyleAlias('paddingBottom', 'padding-bottom', numberConverter);
-    defineStyleAlias('paddingLeft', 'padding-left', numberConverter);
-    defineStyleAlias('marginTop', 'margin-top', numberConverter);
-    defineStyleAlias('marginRight', 'margin-right', numberConverter);
-    defineStyleAlias('marginBottom', 'margin-bottom', numberConverter);
-    defineStyleAlias('marginLeft', 'margin-left', numberConverter);
-    // Coordinates
-    defineStyleAlias('top', 'top', numberConverter);
-    defineStyleAlias('right', 'right', numberConverter);
-    defineStyleAlias('bottom', 'bottom', numberConverter);
-    defineStyleAlias('left', 'left', numberConverter);
-    // Dimensions
-    defineStyleAlias('minWidth', 'min-width', numberConverter);
-    defineStyleAlias('maxWidth', 'max-width', numberConverter);
-    defineStyleAlias('minHeight', 'min-height', numberConverter);
-    defineStyleAlias('maxHeight', 'max-height', numberConverter);
     // Style aliases
     defineStyleAlias('gridAreas', 'grid-template-areas');
     defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);
@@ -154,8 +125,7 @@ export function predefine() {
             .map((s, i) => (i ? columnsConverter : rowsConverter)(s))
             .join('/');
     });
-    // Other styles
-    defineStyleAlias('outlineOffset', 'outline-offset', numberConverter);
+    // Note: outlineOffset is now handled by outlineStyle
     [
         displayStyle,
         transitionStyle,
@@ -176,9 +146,6 @@ export function predefine() {
         justifyStyle,
         presetStyle,
         outlineStyle,
-        fontStyle,
-        fontStyleStyle,
-        groupRadiusAttr,
         // DEPRECATED: `styledScrollbar` is deprecated, use `scrollbar` instead
         styledScrollbarStyle,
         scrollbarStyle,
@@ -381,10 +348,7 @@ export const styleHandlers = {
     fill: wrapHandler(fillStyle),
     svgFill: wrapHandler(svgFillStyle),
     flow: wrapHandler(flowStyle),
-    font: wrapHandler(fontStyle),
-    fontStyle: wrapHandler(fontStyleStyle),
     gap: wrapHandler(gapStyle),
-    groupRadius: wrapHandler(groupRadiusAttr),
     height: wrapHandler(heightStyle),
     inset: wrapHandler(insetStyle),
     justify: wrapHandler(justifyStyle),

package/es/tasty/styles/preset.js

@@ -1,11 +1,24 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8eb1690
+ * @cube-dev/ui-kit v0.0.0-canary-3efb91b
  * 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') {
@@ -26,55 +39,141 @@ function setCSSValue(styles, styleName, presetName, isPropOnly = false) {
         styles[styleName] = styles[`--${styleName}`];
     }
 }
-export function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, font, }) {
-    if (!preset)
-        return;
-    if (preset === true)
-        preset = '';
-    const processed = parseStyle(preset);
-    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';
-    const styles = {};
-    if (!fontSize) {
-        setCSSValue(styles, 'font-size', name);
+/**
+ * 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 (!lineHeight) {
-        setCSSValue(styles, 'line-height', name);
+    if (font == null || font === false) {
+        return null;
     }
-    if (!letterSpacing) {
-        setCSSValue(styles, 'letter-spacing', name);
+    if (font === 'monospace') {
+        return { value: 'var(--monospace-font)', setVar: true };
     }
-    if (!fontWeight) {
-        setCSSValue(styles, 'font-weight', name);
+    if (font === true) {
+        return { value: 'var(--font)', setVar: true };
     }
-    if (!fontStyle) {
-        setCSSValue(styles, 'font-style', name);
+    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)';
+        }
     }
-    if (!textTransform) {
-        setCSSValue(styles, 'text-transform', name);
+    // Handle individual font properties (work with or without preset)
+    const fontSizeVal = toCSS(fontSize, true);
+    if (fontSizeVal) {
+        styles['font-size'] = fontSizeVal;
     }
-    if (!font) {
-        setCSSValue(styles, 'font-family', name);
+    const lineHeightVal = toCSS(lineHeight, true);
+    if (lineHeightVal) {
+        styles['line-height'] = lineHeightVal;
     }
-    setCSSValue(styles, 'bold-font-weight', name, true);
-    setCSSValue(styles, 'icon-size', name, true);
-    if (isStrong) {
-        styles['font-weight'] = 'var(--bold-font-weight)';
+    const letterSpacingVal = toCSS(letterSpacing, true);
+    if (letterSpacingVal) {
+        styles['letter-spacing'] = letterSpacingVal;
     }
-    if (isItalic) {
-        styles['font-style'] = 'italic';
+    // fontWeight: numbers should NOT get 'px' suffix
+    const fontWeightVal = toCSS(fontWeight, false);
+    if (fontWeightVal) {
+        styles['font-weight'] = fontWeightVal;
     }
-    if (isIcon) {
-        styles['font-size'] = 'var(--icon-size)';
-        styles['line-height'] = 'var(--icon-size)';
+    // 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;
     }
-    if (isTight) {
-        styles['line-height'] = 'var(--font-size)';
+    // 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;
 }
@@ -86,6 +185,7 @@ presetStyle.__lookupStyles = [
     'textTransform',
     'fontWeight',
     'fontStyle',
+    'fontFamily',
     'font',
 ];
 

package/es/tasty/styles/radius.js

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

package/es/tasty/styles/reset.js

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

package/es/tasty/styles/scrollbar.js

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

package/es/tasty/styles/shadow.js

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

package/es/tasty/styles/styledScrollbar.js

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

package/es/tasty/styles/transition.js

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

package/es/tasty/styles/types.js

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