@cube-dev/ui-kit 0.0.0-canary-4777472 → 0.0.0-canary-4ec8603

package/es/tasty/styles/styledScrollbar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * Released under the MIT license.
  */
 
@@ -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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * Released under the MIT license.
  */
 

package/es/tasty/styles/width.js

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

package/es/tasty/tasty.js

@@ -1,22 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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 { useStyles } from './hooks/useStyles';
 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';
 /**
  * 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({ styles: 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * 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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * Released under the MIT license.
  */
 
-import { isSelector } from './renderStyles';
+import { isSelector } from '../pipeline';
 export function mergeStyles(...objects) {
     let styles = objects[0] ? { ...objects[0] } : {};
     let pos = 1;

package/es/tasty/utils/modAttrs.js

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

package/es/tasty/utils/processTokens.js

@@ -1,12 +1,86 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-4ec8603
  * Released under the MIT license.
  */
 
 import { getRgbValuesFromRgbaString, hexToRgb, parseStyle } from './styles';
 const devMode = process.env.NODE_ENV !== 'production';
+/**
+ * Parse HSL values from an hsl()/hsla() string.
+ * Supports both comma-separated (legacy) and space-separated (modern) syntax:
+ *   hsl(200, 40%, 50%)
+ *   hsl(200 40% 50%)
+ *   hsl(200 40% 50% / 0.5)
+ *
+ * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.
+ */
+function parseHslValues(str) {
+    const match = str.match(/hsla?\(([^)]+)\)/i);
+    if (!match)
+        return null;
+    const inner = match[1].trim();
+    // Split by slash first (for alpha), then handle color components
+    const [colorPart] = inner.split('/');
+    // Split by comma or whitespace
+    const parts = colorPart
+        .trim()
+        .split(/[,\s]+/)
+        .filter(Boolean);
+    if (parts.length < 3)
+        return null;
+    // Parse hue (can be unitless degrees, deg, turn, rad, or grad)
+    let h = parseFloat(parts[0]);
+    const hueStr = parts[0].toLowerCase();
+    if (hueStr.endsWith('turn')) {
+        h = parseFloat(hueStr) * 360;
+    }
+    else if (hueStr.endsWith('rad')) {
+        h = (parseFloat(hueStr) * 180) / Math.PI;
+    }
+    else if (hueStr.endsWith('grad')) {
+        h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg
+    }
+    // deg or unitless are already in degrees
+    // Normalize hue to 0-360 range
+    h = h % 360;
+    if (h < 0)
+        h += 360;
+    // Parse saturation and lightness (percentages)
+    const parsePercent = (val) => {
+        const num = parseFloat(val);
+        return val.includes('%') ? num / 100 : num;
+    };
+    const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
+    const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
+    return [h, s, l];
+}
+/**
+ * Convert HSL to RGB (sRGB).
+ * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
+ * Same as used in CSS Color 4 spec.
+ *
+ * @param h - Hue in degrees (0-360)
+ * @param s - Saturation (0-1)
+ * @param l - Lightness (0-1)
+ * @returns RGB values in 0-255 range (may have fractional values)
+ */
+function hslToRgb(h, s, l) {
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    // Convert 0-1 range to 0-255
+    return [f(0) * 255, f(8) * 255, f(4) * 255];
+}
+/**
+ * Format a number to a string with up to 1 decimal place, removing trailing zeros.
+ */
+function formatRgbComponent(n) {
+    return parseFloat(n.toFixed(1)).toString();
+}
 /**
  * Extract RGB triplet from a color value.
  * Returns the RGB values as a space-separated string (e.g., "255 128 0")
@@ -25,6 +99,18 @@ function extractRgbValue(colorValue, parsedOutput) {
             return rgbValues.join(' ');
         }
     }
+    // For hsl(...) values, convert to RGB triplet
+    if (parsedOutput.startsWith('hsl(') ||
+        parsedOutput.startsWith('hsla(') ||
+        colorValue.startsWith('hsl(') ||
+        colorValue.startsWith('hsla(')) {
+        // Try parsedOutput first, then original colorValue
+        const hslValues = parseHslValues(parsedOutput) || parseHslValues(colorValue);
+        if (hslValues) {
+            const [r, g, b] = hslToRgb(hslValues[0], hslValues[1], hslValues[2]);
+            return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;
+        }
+    }
     // For hex values, convert to RGB triplet
     if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {
         const rgbResult = hexToRgb(colorValue);

package/es/tasty/utils/string.js

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