@cube-dev/ui-kit 0.98.8 → 0.99.0

package/es/tasty/styles/predefined.js

@@ -1,36 +1,36 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-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';
+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';
 const numberConverter = (val) => {
     if (typeof val === 'number') {
         return `${val}px`;
@@ -128,6 +128,7 @@ 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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { DIRECTIONS, parseStyle } from '../utils/styles';
+import { DIRECTIONS, parseStyle } from '../utils/styles.js';
 const PROP = 'var(--radius)';
 const SHARP = 'var(--leaf-sharp-radius)';
 export function radiusStyle({ radius }) {
@@ -57,16 +57,9 @@ export function radiusStyle({ radius }) {
             values = arr;
         }
     }
-    return [
-        {
-            '--local-radius': values.join(' '),
-            'border-radius': 'var(--local-radius)',
-        },
-        {
-            $: '>*',
-            '--context-radius': values.join(' '),
-        },
-    ];
+    return {
+        'border-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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 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(--local-placeholder-color)',
+            color: 'var(--placeholder-color, rgb(var(--dark-color-rgb) / .3))',
             filter: 'saturate(.33)',
         },
         {
@@ -53,10 +53,6 @@ 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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 /**
  * 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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * 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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { parseStyle } from '../utils/styles';
+import { parseStyle } from '../utils/styles.js';
 const MAP = {
     fade: ['mask'],
     translate: ['transform', 'translate'],
@@ -88,7 +88,14 @@ export function transitionStyle({ transition }) {
     });
     const result = Object.entries(map)
         .map(([style, [name, easing, timing, delay]]) => {
-        return `${style}  ${timing || getTiming(name)} ${easing || DEFAULT_EASING} ${delay || '0s'}`;
+        let value = `${style} ${timing || getTiming(name)}`;
+        if (easing || delay) {
+            value += ` ${easing || DEFAULT_EASING}`;
+        }
+        if (delay) {
+            value += ` ${delay}`;
+        }
+        return value;
     })
         .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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * 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.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { dimensionStyle } from './dimension';
+import { dimensionStyle } from './dimension.js';
 const dimension = dimensionStyle('width');
 export function widthStyle({ width }) {
     return dimension(width);

package/es/tasty/tasty.js

@@ -1,22 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { createElement, forwardRef, useContext, useInsertionEffect, useMemo, useRef, } from 'react';
+import { createElement, forwardRef, useMemo, } from 'react';
 import { isValidElementType } from 'react-is';
-import { allocateClassName, inject, injectGlobal } from './injector';
-import { BreakpointsContext } from './providers/BreakpointsProvider';
-import { BASE_STYLES } from './styles/list';
-import { cacheWrapper } from './utils/cache-wrapper';
-import { getDisplayName } from './utils/getDisplayName';
-import { mergeStyles } from './utils/mergeStyles';
-import { modAttrs } from './utils/modAttrs';
-import { processTokens, stringifyTokens } from './utils/processTokens';
-import { renderStyles } from './utils/renderStyles';
-import { stringifyStyles } from './utils/styles';
+import { useStyles } from './hooks/useStyles.js';
+import { BASE_STYLES } from './styles/list.js';
+import { getDisplayName } from './utils/getDisplayName.js';
+import { mergeStyles } from './utils/mergeStyles.js';
+import { modAttrs } from './utils/modAttrs.js';
+import { processTokens, stringifyTokens } from './utils/processTokens.js';
 /**
  * Mapping of is* properties to their corresponding HTML attributes
  */
@@ -47,51 +43,68 @@ function handleIsProperties(props) {
     }
 }
 /**
- * Simple hash function for internal cache keys
+ * Creates a sub-element component for compound component patterns.
+ * Sub-elements are lightweight components with data-element attribute for CSS targeting.
  */
-// Generate unique cache key for style deduplication
-function generateStyleCacheKey(styleKey, contextKey) {
-    // Use null character as separator for better performance and no collision risk
-    return contextKey ? `${styleKey}\0${contextKey}` : styleKey;
+function createSubElement(elementName, definition) {
+    // Normalize definition to object form
+    const config = typeof definition === 'string'
+        ? { as: definition }
+        : definition;
+    const tag = config.as ?? 'div';
+    const defaultQa = config.qa;
+    const defaultQaVal = config.qaVal;
+    const SubElement = forwardRef((props, ref) => {
+        const { qa, qaVal, mods, tokens, isDisabled, isHidden, isChecked, className, style, ...htmlProps } = props;
+        // Build mod attributes
+        let modProps;
+        if (mods) {
+            modProps = modAttrs(mods);
+        }
+        // Process tokens into inline style properties
+        const tokenStyle = tokens
+            ? processTokens(tokens)
+            : undefined;
+        // Merge token styles with explicit style prop (style has priority)
+        let mergedStyle;
+        if (tokenStyle || style) {
+            mergedStyle =
+                tokenStyle && style
+                    ? { ...tokenStyle, ...style }
+                    : (tokenStyle ?? style);
+        }
+        const elementProps = {
+            'data-element': elementName,
+            'data-qa': qa ?? defaultQa,
+            'data-qaval': qaVal ?? defaultQaVal,
+            ...(modProps || {}),
+            ...htmlProps,
+            className,
+            style: mergedStyle,
+            isDisabled,
+            isHidden,
+            isChecked,
+            ref,
+        };
+        // Handle is* properties (isDisabled -> disabled + data-disabled, etc.)
+        handleIsProperties(elementProps);
+        // Clean up undefined data attributes
+        if (elementProps['data-qa'] === undefined)
+            delete elementProps['data-qa'];
+        if (elementProps['data-qaval'] === undefined)
+            delete elementProps['data-qaval'];
+        return createElement(tag, elementProps);
+    });
+    SubElement.displayName = `SubElement(${elementName})`;
+    return SubElement;
 }
 // Implementation
 export function tasty(Component, options) {
-    if (typeof Component === 'string') {
-        return tastyGlobal(Component, options);
-    }
     if (isValidElementType(Component)) {
         return tastyWrap(Component, options);
     }
     return tastyElement(Component);
 }
-// Internal specialized implementations
-function tastyGlobal(selector, styles) {
-    const _StyleDeclarationComponent = ({ breakpoints, }) => {
-        let contextBreakpoints = useContext(BreakpointsContext);
-        const breakpointsList = (breakpoints ?? contextBreakpoints) || [980];
-        const disposeRef = useRef(null);
-        const styleResults = useMemo(() => {
-            if (!styles)
-                return [];
-            return renderStyles(styles, breakpointsList, selector);
-        }, [selector, styles, breakpointsList]);
-        // Inject styles at insertion phase; cleanup on change/unmount
-        useInsertionEffect(() => {
-            disposeRef.current?.();
-            if (styleResults.length === 0)
-                return;
-            const { dispose } = injectGlobal(styleResults);
-            disposeRef.current = dispose;
-            return () => {
-                disposeRef.current?.();
-                disposeRef.current = null;
-            };
-        }, [styleResults]);
-        return null;
-    };
-    _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
-    return _StyleDeclarationComponent;
-}
 function tastyWrap(Component, options) {
     let { as: extendTag, element: extendElement, ...defaultProps } = (options ?? {});
     let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
@@ -125,7 +138,7 @@ function tastyWrap(Component, options) {
     return _WrappedComponent;
 }
 function tastyElement(tastyOptions) {
-    let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, tokens: defaultTokens, ...defaultProps } = tastyOptions;
+    let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, tokens: defaultTokens, elements, ...defaultProps } = tastyOptions;
     let _TastyComponent;
     if (variants) {
         const variantEntries = Object.entries(variants);
@@ -162,18 +175,10 @@ function tastyElement(tastyOptions) {
         });
     }
     else {
-        /**
-         * An additional optimization that allows to avoid rendering styles across various instances
-         * of the same element if no custom styles are provided via `styles` prop or direct style props.
-         */
-        const renderDefaultStyles = cacheWrapper((breakpoints) => {
-            // Return rules without className - injector will add it
-            return renderStyles(defaultStyles || {}, breakpoints);
-        });
         let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
-            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
+            let { as, styles, variant: _omitVariant, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
             // Optimize propStyles extraction - avoid creating empty objects
             let propStyles = null;
             const propsToCheck = styleProps
@@ -192,66 +197,17 @@ function tastyElement(tastyOptions) {
                 (styles && Object.keys(styles).length === 0)) {
                 styles = undefined;
             }
-            let contextBreakpoints = useContext(BreakpointsContext);
-            breakpoints = breakpoints ?? contextBreakpoints;
-            // Memoize breakpoints key once
-            const breakpointsKey = useMemo(() => breakpoints?.join(',') || '', [breakpoints?.join(',')]);
-            const propStylesKey = stringifyStyles(propStyles);
-            // Optimize style computation and cache key generation
-            const { allStyles, cacheKey, useDefaultStyles } = useMemo(() => {
+            // Merge default styles with instance styles and prop styles
+            const allStyles = useMemo(() => {
                 const hasStyles = styles && Object.keys(styles).length > 0;
                 const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;
-                const useDefault = !hasStyles && !hasPropStyles;
-                const merged = useDefault
-                    ? defaultStyles
-                    : mergeStyles(defaultStyles, styles, propStyles);
-                // Generate cache key for style deduplication
-                const styleKey = stringifyStyles(merged || {});
-                const key = generateStyleCacheKey(styleKey, breakpointsKey ? `bp:${breakpointsKey}` : undefined);
-                return {
-                    allStyles: merged,
-                    cacheKey: key,
-                    useDefaultStyles: useDefault,
-                };
-            }, [styles, propStylesKey, breakpointsKey]);
-            // Compute rules synchronously; inject via insertion effect
-            const directResult = useMemo(() => {
-                if (useDefaultStyles) {
-                    return renderDefaultStyles(breakpoints);
-                }
-                else if (allStyles && Object.keys(allStyles).length > 0) {
-                    // Return rules without className - injector will add it
-                    return renderStyles(allStyles, breakpoints);
-                }
-                else {
-                    return { rules: [], className: '' };
-                }
-            }, [useDefaultStyles, allStyles, breakpointsKey, cacheKey]);
-            const disposeRef = useRef(null);
-            // Allocate className in render phase (safe for React Strict Mode)
-            const allocatedClassName = useMemo(() => {
-                if (!directResult.rules.length || !cacheKey)
-                    return '';
-                const { className } = allocateClassName(cacheKey);
-                return className;
-            }, [directResult.rules.length, cacheKey]);
-            // Inject styles in insertion effect (avoids render phase side effects)
-            useInsertionEffect(() => {
-                // Cleanup previous disposal reference
-                disposeRef.current?.();
-                if (directResult.rules.length > 0) {
-                    const injectionResult = inject(directResult.rules, { cacheKey });
-                    disposeRef.current = injectionResult.dispose;
+                if (!hasStyles && !hasPropStyles) {
+                    return defaultStyles;
                 }
-                else {
-                    disposeRef.current = null;
-                }
-                return () => {
-                    disposeRef.current?.();
-                    disposeRef.current = null;
-                };
-            }, [directResult.rules, cacheKey]);
-            const injectedClassName = allocatedClassName;
+                return mergeStyles(defaultStyles, styles, propStyles);
+            }, [styles, propStyles]);
+            // Use the useStyles hook for style generation and injection
+            const { className: stylesClassName } = useStyles(allStyles);
             // Merge default tokens with instance tokens (instance overrides defaults)
             const tokensKey = stringifyTokens(tokens);
             const mergedTokens = useMemo(() => {
@@ -282,11 +238,8 @@ function tastyElement(tastyOptions) {
                 const modsObject = mods;
                 modProps = modAttrs(modsObject);
             }
-            // Merge user className with injected className
-            const finalClassName = [
-                userClassName || '',
-                injectedClassName,
-            ]
+            // Merge user className with generated className
+            const finalClassName = [userClassName || '', stylesClassName]
                 .filter(Boolean)
                 .join(' ');
             const elementProps = {
@@ -302,13 +255,19 @@ function tastyElement(tastyOptions) {
             };
             // Apply the helper to handle is* properties
             handleIsProperties(elementProps);
-            // NEW: Use plain createElement instead of styled Element
             const renderedElement = createElement(as ?? originalAs, elementProps);
-            // Note: Empty className is normal for elements with no styles
             return renderedElement;
         });
     }
     _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
+    // Attach sub-element components if elements are defined
+    if (elements) {
+        const subElements = Object.entries(elements).reduce((acc, [name, definition]) => {
+            acc[name] = createSubElement(name, definition);
+            return acc;
+        }, {});
+        return Object.assign(_TastyComponent, subElements);
+    }
     return _TastyComponent;
 }
 export const Element = tasty({});

package/es/tasty/types.js

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

package/es/tasty/utils/cache-wrapper.js

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

package/es/tasty/utils/case-converter.js

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

package/es/tasty/utils/colors.js

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

package/es/tasty/utils/dotize.js

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

package/es/tasty/utils/filterBaseProps.js

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

package/es/tasty/utils/getDisplayName.js

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

package/es/tasty/utils/isDevEnv.js

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

package/es/tasty/utils/mergeStyles.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { isSelector } from './renderStyles';
+import { isSelector } from '../pipeline/index.js';
 export function mergeStyles(...objects) {
     let styles = objects[0] ? { ...objects[0] } : {};
     let pos = 1;

package/es/tasty/utils/modAttrs.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { cacheWrapper } from './cache-wrapper';
-import { camelToKebab } from './case-converter';
+import { cacheWrapper } from './cache-wrapper.js';
+import { camelToKebab } from './case-converter.js';
 function modAttrs(map) {
     return map
         ? Object.keys(map).reduce((attrs, key) => {