@cube-dev/ui-kit 0.88.0 → 0.89.0

package/es/tasty/utils/styles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.88.0
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -57,7 +57,51 @@ export const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
 const MOD_NAME_CACHE = new Map();
 export function getModSelector(modName) {
     if (!MOD_NAME_CACHE.has(modName)) {
-        MOD_NAME_CACHE.set(modName, modName.match(/^[a-z]/) ? `[data-is-${camelToKebab(modName)}]` : modName);
+        let selector;
+        // Check if it's a shorthand value mod: key=value, key^=value, key$=value, key*=value
+        // Supports: key=value, key="value", key='value', and with ^=, $=, *= operators
+        const valueModMatch = modName.match(/^([a-z][a-z0-9-]*)(\^=|\$=|\*=|=)(.+)$/i);
+        if (valueModMatch) {
+            const key = valueModMatch[1];
+            const operator = valueModMatch[2];
+            let value = valueModMatch[3];
+            // Remove quotes if present
+            if ((value.startsWith('"') && value.endsWith('"')) ||
+                (value.startsWith("'") && value.endsWith("'"))) {
+                value = value.slice(1, -1);
+            }
+            // Convert to full attribute selector with the appropriate operator
+            selector = `[data-${camelToKebab(key)}${operator}"${value}"]`;
+        }
+        else if (modName.match(/^[a-z]/)) {
+            // Boolean mod: convert camelCase to kebab-case
+            selector = `[data-${camelToKebab(modName)}]`;
+        }
+        else {
+            // Check if it contains :has() with capitalized element names
+            if (modName.includes(':has(')) {
+                selector = modName.replace(/:has\(([^)]+)\)/g, (match, content) => {
+                    // Validate that combinators have spaces around them
+                    // Check for capitalized words adjacent to combinators without spaces
+                    const invalidPattern = /[A-Z][a-z]*[>+~]|[>+~][A-Z][a-z]*/;
+                    if (invalidPattern.test(content)) {
+                        console.error(`[Tasty] Invalid :has() selector syntax: "${modName}"\n` +
+                            `Combinators (>, +, ~) must have spaces around them when used with element names.\n` +
+                            `Example: Use ":has(Body > Row)" instead of ":has(Body>Row)"\n` +
+                            `This is a design choice: the parser uses simple whitespace splitting for performance.`);
+                    }
+                    // Transform capitalized words to [data-element="..."] selectors
+                    const tokens = content.split(/\s+/);
+                    const transformed = tokens.map((token) => /^[A-Z]/.test(token) ? `[data-element="${token}"]` : token);
+                    return `:has(${transformed.join(' ')})`;
+                });
+            }
+            else {
+                // Pass through (e.g., :hover, .class, [attr])
+                selector = modName;
+            }
+        }
+        MOD_NAME_CACHE.set(modName, selector);
     }
     return MOD_NAME_CACHE.get(modName);
 }
@@ -230,7 +274,7 @@ export function extractStyles(props, styleList = [], defaultStyles, propMap, ign
     }, {});
     return styles;
 }
-const STATES_REGEXP = /([&|!^])|([()])|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
+const STATES_REGEXP = /([&|!^])|([()])|([a-z][a-z0-9-]+=(?:"[^"]*"|'[^']*'|[^\s&|!^()]+))|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
 export const STATE_OPERATORS = {
     NOT: '!',
     AND: '&',

package/es/tasty/utils/warnings.js

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

package/es/tokens.js

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

package/es/utils/ResizeSensor.js

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

package/es/utils/index.js

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

package/es/utils/modules.js

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

package/es/utils/promise.js

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

package/es/utils/raf.js

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

package/es/utils/random.js

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

package/es/utils/range.js

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

package/es/utils/react/RenderCache.js

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

package/es/utils/react/Slots.js

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

package/es/utils/react/chain.js

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

package/es/utils/react/forwardRefWithGenerics.js

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

package/es/utils/react/index.js

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

package/es/utils/react/interactions.js

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

package/es/utils/react/isTextOnly.js

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

package/es/utils/react/mapProps.js

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

package/es/utils/react/mergeProps.js

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

package/es/utils/react/nullableValue.js

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

package/es/utils/react/sharedStore.js

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

package/es/utils/react/useCombinedRefs.js

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

package/es/utils/react/useControlledFocusVisible.js

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

package/es/utils/react/useEventBus.js

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

package/es/utils/react/useId.js

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

package/es/utils/react/useIsDarwin.js

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

package/es/utils/react/useKeySymbols.js

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

package/es/utils/react/useLayoutEffect.js

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

package/es/utils/react/useQaProps.js

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

package/es/utils/react/useViewportSize.js

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

package/es/utils/react/wrapNodeIfPlain.js

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

package/es/utils/tree.js

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

package/es/utils/warnings.js

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

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.88.0
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.88.0';
+    const version = '0.89.0';
     // Ensure CubeUIKit is defined on window in a way bundlers recognize
     window.CubeUIKit = window.CubeUIKit || { version };
     // Check for multiple versions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/Root.d.ts

@@ -16,5 +16,6 @@ export interface CubeRootProps extends BaseProps {
     monospaceFont?: string;
     applyLegacyTokens?: boolean;
     tracking?: TrackingProps;
+    cursorStrategy?: 'web' | 'native';
 }
 export declare function Root(allProps: CubeRootProps): import("react/jsx-runtime").JSX.Element;

package/types/components/actions/Button/Button.d.ts

@@ -25,17 +25,19 @@ export declare const DEFAULT_BUTTON_STYLES: {
     readonly margin: 0;
     readonly boxSizing: "border-box";
     readonly cursor: {
-        readonly '': "pointer";
-        readonly disabled: "default";
+        readonly '': "default";
+        readonly ':is(a)': "pointer";
+        readonly ':is(button)': "$pointer";
+        readonly disabled: "not-allowed";
     };
     readonly gap: {
         readonly '': ".75x";
-        readonly '[data-size="small"]': ".5x";
+        readonly 'size=small': ".5x";
     };
     readonly preset: {
         readonly '': "t3m";
-        readonly '[data-size="xsmall"]': "t4";
-        readonly '[data-size="xlarge"]': "t2m";
+        readonly 'size=xsmall': "t4";
+        readonly 'size=xlarge': "t2m";
     };
     readonly textDecoration: "none";
     readonly transition: "theme";
@@ -44,34 +46,34 @@ export declare const DEFAULT_BUTTON_STYLES: {
     readonly outlineOffset: 1;
     readonly padding: {
         readonly '': ".5x (1.5x - 1bw)";
-        readonly '[data-size="small"] | [data-size="xsmall"]': ".5x (1.25x - 1bw)";
-        readonly '[data-size="medium"]': ".5x (1.5x - 1bw)";
-        readonly '[data-size="large"]': ".5x (1.75x - 1bw)";
-        readonly '[data-size="xlarge"]': ".5x (2x - 1bw)";
-        readonly 'single-icon | [data-type="link"]': 0;
+        readonly 'size=small | size=xsmall': ".5x (1.25x - 1bw)";
+        readonly 'size=medium': ".5x (1.5x - 1bw)";
+        readonly 'size=large': ".5x (1.75x - 1bw)";
+        readonly 'size=xlarge': ".5x (2x - 1bw)";
+        readonly 'single-icon | type=link': 0;
     };
     readonly width: {
         readonly '': "initial";
-        readonly '[data-size="xsmall"] & single-icon': "$size-xs $size-xs";
-        readonly '[data-size="small"] & single-icon': "$size-sm $size-sm";
-        readonly '[data-size="medium"] & single-icon': "$size-md $size-md";
-        readonly '[data-size="large"] & single-icon': "$size-lg $size-lg";
-        readonly '[data-size="xlarge"] & single-icon': "$size-xl $size-xl";
-        readonly '[data-type="link"]': "initial";
+        readonly 'size=xsmall & single-icon': "$size-xs $size-xs";
+        readonly 'size=small & single-icon': "$size-sm $size-sm";
+        readonly 'size=medium & single-icon': "$size-md $size-md";
+        readonly 'size=large & single-icon': "$size-lg $size-lg";
+        readonly 'size=xlarge & single-icon': "$size-xl $size-xl";
+        readonly 'type=link': "initial";
     };
     readonly height: {
         readonly '': "initial";
-        readonly '[data-size="xsmall"]': "$size-xs $size-xs";
-        readonly '[data-size="small"]': "$size-sm $size-sm";
-        readonly '[data-size="medium"]': "$size-md $size-md";
-        readonly '[data-size="large"]': "$size-lg $size-lg";
-        readonly '[data-size="xlarge"]': "$size-xl $size-xl";
-        readonly '[data-type="link"]': "initial";
+        readonly 'size=xsmall': "$size-xs $size-xs";
+        readonly 'size=small': "$size-sm $size-sm";
+        readonly 'size=medium': "$size-md $size-md";
+        readonly 'size=large': "$size-lg $size-lg";
+        readonly 'size=xlarge': "$size-xl $size-xl";
+        readonly 'type=link': "initial";
     };
     readonly whiteSpace: "nowrap";
     readonly radius: {
         readonly '': true;
-        readonly '[data-type="link"] & !focused': 0;
+        readonly 'type=link & !focused': 0;
     };
     readonly ButtonIcon: {
         readonly width: "min 1fs";

package/types/components/actions/Menu/styled.d.ts

@@ -72,7 +72,7 @@ export declare const StyledHeader: import("react").ComponentType<{
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
     mods?: {
-        [key: string]: boolean | null | undefined;
+        [key: string]: string | number | boolean | null | undefined;
     } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
@@ -518,7 +518,7 @@ export declare const StyledFooter: import("react").ComponentType<{
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
     mods?: {
-        [key: string]: boolean | null | undefined;
+        [key: string]: string | number | boolean | null | undefined;
     } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
@@ -966,7 +966,7 @@ export declare const StyledSectionHeading: import("react").ComponentType<{
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
     mods?: {
-        [key: string]: boolean | null | undefined;
+        [key: string]: string | number | boolean | null | undefined;
     } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;

package/types/components/content/Item/Item.d.ts

@@ -9,7 +9,7 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
     prefix?: ReactNode;
     suffix?: ReactNode;
     description?: ReactNode;
-    descriptionPlacement?: 'inline' | 'block' | 'auto';
+    descriptionPlacement?: 'inline' | 'block';
     /**
      * Whether the item is selected.
      * @default false

package/types/components/content/List/SectionHeading.d.ts

@@ -69,7 +69,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
     mods?: {
-        [key: string]: boolean | null | undefined;
+        [key: string]: string | number | boolean | null | undefined;
     } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;

package/types/components/fields/DatePicker/DatePickerElement.d.ts

@@ -69,7 +69,7 @@ export declare const DatePickerElement: import("react").ComponentType<{
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
     mods?: {
-        [key: string]: boolean | null | undefined;
+        [key: string]: string | number | boolean | null | undefined;
     } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;

package/types/components/fields/Select/Select.d.ts

@@ -14,7 +14,7 @@ export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, AriaLa
     suffix?: ReactNode;
     /** Description text for the trigger. Note: Different from field-level description. */
     description?: ReactNode;
-    descriptionPlacement?: 'inline' | 'block' | 'auto';
+    descriptionPlacement?: 'inline' | 'block';
     /** Keyboard shortcut that triggers the select when pressed */
     hotkeys?: string;
     /**

package/types/tasty/styles/types.d.ts

@@ -357,6 +357,11 @@ export type StylesWithoutSelectors = {
     [key in keyof StylesInterface]?: ResponsiveStyleValue<StylesInterface[key]>;
 };
 export type Styles = StylesWithoutSelectors & {
-    [key: string]: ResponsiveStyleValue<string | number | boolean | undefined> | StylesWithoutSelectors;
+    [key: string]: ResponsiveStyleValue<string | number | boolean | undefined> | Styles;
+    /**
+     * Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
+     * Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.
+     */
+    $?: string;
 };
 export {};

package/types/tasty/types.d.ts

@@ -24,7 +24,7 @@ export interface BasePropsWithoutChildren<K extends TagName = TagName> extends P
     inline?: boolean;
     /** The list of element modifiers **/
     mods?: {
-        [key: string]: boolean | undefined | null;
+        [key: string]: boolean | string | number | undefined | null;
     };
     /** Whether the element is hidden (`hidden` attribute is set) */
     isHidden?: boolean;

package/types/tasty/utils/renderStyles.d.ts

@@ -1,6 +1,14 @@
 /**
- * Style rendering that works with structured style objects
- * Eliminates CSS string parsing for better performance
+ * Style rendering that works with structured style objects.
+ * Eliminates CSS string parsing for better performance.
+ *
+ * Key optimizations:
+ * - Early exit checks (hasSameAttributeConflicts) handle common cases without overhead
+ * - Logical rule caching (logicalRulesCache) memoizes expensive style processing
+ * - Conflict detection prevents invalid CSS selector combinations
+ * - Not-selector optimization reduces CSS size
+ * - Priority-based filtering handles mod precedence correctly
+ * - Consolidated mod processing eliminates code duplication
  */
 import { Styles } from '../styles/types';
 export interface StyleResult {