@cube-dev/ui-kit 0.87.6 → 0.89.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @cube-dev/ui-kit
 
+## 0.89.0
+
+### Minor Changes
+
+- [#872](https://github.com/cube-js/cube-ui-kit/pull/872) [`4b8a6d6e`](https://github.com/cube-js/cube-ui-kit/commit/4b8a6d6e4342303ec6ba6c58a2c17b38eeef2964) Thanks [@tenphi](https://github.com/tenphi)! - **BREAKING:** Boolean mods now generate `data-*` instead of `data-is-*` attributes (`mods={{ hovered: true }}` → `data-hovered=""` instead of `data-is-hovered=""`).
+
+  **NEW:** Value mods support - `mods` now accepts string values (`mods={{ theme: 'danger' }}` → `data-theme="danger"`). Includes shorthand syntax in styles (`theme=danger`, `theme="danger"`). See Tasty documentation for details.
+
+- [#872](https://github.com/cube-js/cube-ui-kit/pull/872) [`4b8a6d6e`](https://github.com/cube-js/cube-ui-kit/commit/4b8a6d6e4342303ec6ba6c58a2c17b38eeef2964) Thanks [@tenphi](https://github.com/tenphi)! - Add support for `:has(Item)` syntax in style mappings. Capitalized element names inside `:has()` pseudo-class selectors are now automatically transformed to `data-element` attribute selectors (`:has(Item)` → `:has([data-element="Item"])`).
+
+- [#873](https://github.com/cube-js/cube-ui-kit/pull/873) [`c29bee57`](https://github.com/cube-js/cube-ui-kit/commit/c29bee5708e4aa75e75e80ffb3509de5a6ac9d13) Thanks [@tenphi](https://github.com/tenphi)! - Allow to set cursorStrategy to `web` or `native` in Root component.
+
+## 0.88.0
+
+### Minor Changes
+
+- [`b817bcbc`](https://github.com/cube-js/cube-ui-kit/commit/b817bcbce9a962dfeb579a40020620ea11ab96bf) Thanks [@tenphi](https://github.com/tenphi)! - Rename ClearIcon -> TrashIcon. Add a new ClearIcon.
+
+- [`bc28fc33`](https://github.com/cube-js/cube-ui-kit/commit/bc28fc3387d607733fa98f9d802ff2f31826e2f4) Thanks [@tenphi](https://github.com/tenphi)! - Rename `type` prop in ListBox to `shape`.
+
+### Patch Changes
+
+- [`bc28fc33`](https://github.com/cube-js/cube-ui-kit/commit/bc28fc3387d607733fa98f9d802ff2f31826e2f4) Thanks [@tenphi](https://github.com/tenphi)! - Add `shape` prop to Item component with three values: `card`, `button` (default), and `sharp` to control border radius styling.
+
 ## 0.87.6
 
 ### Patch Changes

package/es/_internal/hooks/index.js

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

package/es/_internal/hooks/use-chained-callback.js

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

package/es/_internal/hooks/use-debounced-value.js

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

package/es/_internal/hooks/use-deprecation-warning.js

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

package/es/_internal/hooks/use-effect-once.js

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

package/es/_internal/hooks/use-event.js

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

package/es/_internal/hooks/use-is-first-render.js

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

package/es/_internal/hooks/use-sync-ref.js

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

package/es/_internal/hooks/use-timer/index.js

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

package/es/_internal/hooks/use-timer/timer.js

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

package/es/_internal/hooks/use-timer/use-timer.js

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

package/es/_internal/hooks/use-update-effect.js

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

package/es/_internal/hooks/use-warn.js

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

package/es/_internal/index.js

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

package/es/components/Block.js

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

package/es/components/CollectionItem.js

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

package/es/components/GlobalStyles.js

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

package/es/components/GridProvider.js

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

package/es/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -25,7 +25,7 @@ export const HiddenInput = tasty({
         height: '100%',
         cursor: {
             '': 'default',
-            button: 'pointer',
+            button: '$pointer',
             disabled: 'not-allowed',
         },
     },

package/es/components/OpenTrasition.js

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

package/es/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -21,7 +21,6 @@ import { NotificationsProvider } from './overlays/NewNotifications/Notifications
 import { PortalProvider } from './portal';
 const RootElement = tasty({
     id: 'cube-ui-kit-root',
-    // className: 'root',
 });
 const DEFAULT_STYLES = {
     display: 'block',
@@ -38,7 +37,7 @@ const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports ===
 export function Root(allProps) {
     let { children, 
     /** Raw css styles for body element */
-    bodyStyles, breakpoints = [980], fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens, tracking, style, ...props } = allProps;
+    bodyStyles, breakpoints = [980], fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens, tracking, cursorStrategy = 'web', style, ...props } = allProps;
     const ref = useRef(null);
     const [rootRef, setRootRef] = useState();
     // We need to measure the window's height in JS rather than using percentages in CSS
@@ -83,6 +82,7 @@ export function Root(allProps) {
                         '--cube-dynamic-viewport-height': height
                             ? height + 'px'
                             : '100dvh',
+                        '--pointer': cursorStrategy === 'web' ? 'pointer' : 'default',
                         ...style,
                     }, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(EventBusProvider, { children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) }) })] }) }) }) }));
 }

package/es/components/actions/Action/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -20,7 +20,7 @@ const ActionElement = tasty({
         padding: 0,
         outline: 0,
         transition: 'theme',
-        cursor: 'pointer',
+        cursor: '$pointer',
         textDecoration: 'none',
         fill: '#clear',
     },

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -30,17 +30,19 @@ export const DEFAULT_BUTTON_STYLES = {
     margin: 0,
     boxSizing: 'border-box',
     cursor: {
-        '': 'pointer',
-        disabled: 'default',
+        '': 'default',
+        ':is(a)': 'pointer',
+        ':is(button)': '$pointer',
+        disabled: 'not-allowed',
     },
     gap: {
         '': '.75x',
-        '[data-size="small"]': '.5x',
+        'size=small': '.5x',
     },
     preset: {
         '': 't3m',
-        '[data-size="xsmall"]': 't4',
-        '[data-size="xlarge"]': 't2m',
+        'size=xsmall': 't4',
+        'size=xlarge': 't2m',
     },
     textDecoration: 'none',
     transition: 'theme',
@@ -49,34 +51,34 @@ export const DEFAULT_BUTTON_STYLES = {
     outlineOffset: 1,
     padding: {
         '': '.5x (1.5x - 1bw)',
-        '[data-size="small"] | [data-size="xsmall"]': '.5x (1.25x - 1bw)',
-        '[data-size="medium"]': '.5x (1.5x - 1bw)',
-        '[data-size="large"]': '.5x (1.75x - 1bw)',
-        '[data-size="xlarge"]': '.5x (2x - 1bw)',
-        'single-icon | [data-type="link"]': 0,
+        'size=small | size=xsmall': '.5x (1.25x - 1bw)',
+        'size=medium': '.5x (1.5x - 1bw)',
+        'size=large': '.5x (1.75x - 1bw)',
+        'size=xlarge': '.5x (2x - 1bw)',
+        'single-icon | type=link': 0,
     },
     width: {
         '': 'initial',
-        '[data-size="xsmall"] & single-icon': '$size-xs $size-xs',
-        '[data-size="small"] & single-icon': '$size-sm $size-sm',
-        '[data-size="medium"] & single-icon': '$size-md $size-md',
-        '[data-size="large"] & single-icon': '$size-lg $size-lg',
-        '[data-size="xlarge"] & single-icon': '$size-xl $size-xl',
-        '[data-type="link"]': 'initial',
+        'size=xsmall & single-icon': '$size-xs $size-xs',
+        'size=small & single-icon': '$size-sm $size-sm',
+        'size=medium & single-icon': '$size-md $size-md',
+        'size=large & single-icon': '$size-lg $size-lg',
+        'size=xlarge & single-icon': '$size-xl $size-xl',
+        'type=link': 'initial',
     },
     height: {
         '': 'initial',
-        '[data-size="xsmall"]': '$size-xs $size-xs',
-        '[data-size="small"]': '$size-sm $size-sm',
-        '[data-size="medium"]': '$size-md $size-md',
-        '[data-size="large"]': '$size-lg $size-lg',
-        '[data-size="xlarge"]': '$size-xl $size-xl',
-        '[data-type="link"]': 'initial',
+        'size=xsmall': '$size-xs $size-xs',
+        'size=small': '$size-sm $size-sm',
+        'size=medium': '$size-md $size-md',
+        'size=large': '$size-lg $size-lg',
+        'size=xlarge': '$size-xl $size-xl',
+        'type=link': 'initial',
     },
     whiteSpace: 'nowrap',
     radius: {
         '': true,
-        '[data-type="link"] & !focused': 0,
+        'type=link & !focused': 0,
     },
     ButtonIcon: {
         width: 'min 1fs',
@@ -165,7 +167,7 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const modifiers = useMemo(() => ({
         loading: isLoading,
         selected: isSelected,
-        'with-icons': hasIcons,
+        'has-icons': hasIcons,
         'left-icon': !!icon,
         'right-icon': !!rightIcon,
         'single-icon': singleIcon,

package/es/components/actions/Button/index.js

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

package/es/components/actions/ButtonGroup/ButtonGroup.js

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

package/es/components/actions/CommandMenu/CommandMenu.js

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

package/es/components/actions/CommandMenu/index.js

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

package/es/components/actions/CommandMenu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -60,9 +60,9 @@ export const StyledSearchInput = tasty({
         },
         $size: {
             '': '$size-md',
-            '[data-size="small"]': '$size-sm',
-            '[data-size="medium"]': '$size-md',
-            '[data-size="large"]': '$size-lg',
+            'size=small': '$size-sm',
+            'size=medium': '$size-md',
+            'size=large': '$size-lg',
         },
     },
 });

package/es/components/actions/ItemAction/ItemAction.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -22,15 +22,15 @@ const ItemActionElement = tasty({
         reset: 'button',
         outline: 0,
         outlineOffset: 1,
-        cursor: { '': 'pointer', disabled: 'default' },
+        cursor: { '': '$pointer', disabled: 'default' },
         padding: {
             '': '0 $inline-padding',
-            'with-icon': 0,
-            'with-icon & with-label': '0 $inline-padding 0 0',
+            'has-icon': 0,
+            'has-icon & has-label': '0 $inline-padding 0 0',
         },
         '$inline-padding': {
             '': 'max($min-inline-padding, (($action-size - 1lh - 2bw) / 2 + $inline-compensation))',
-            '[data-size="inline"]': '.25x',
+            'size=inline': '.25x',
         },
         '$inline-compensation': '.5x',
         '$min-inline-padding': '(.5x - 1bw)',
@@ -76,9 +76,9 @@ export const ItemAction = forwardRef(function ItemAction(allProps, ref) {
         checkbox: hasCheckbox,
         selected: isSelected,
         loading: isLoading,
-        'with-label': !!children,
+        'has-label': !!children,
         context: !!contextType,
-        'with-icon': !!icon,
+        'has-icon': !!icon,
         ...mods,
     }), [hasCheckbox, isSelected, isLoading, children, contextType, mods]);
     // Extract aria-label from tooltip if needed

package/es/components/actions/ItemAction/index.js

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

package/es/components/actions/ItemActionContext.js

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

package/es/components/actions/ItemButton/ItemButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.87.6
+ * @cube-dev/ui-kit v0.89.0
  * Released under the MIT license.
  */
 
@@ -34,16 +34,16 @@ const ActionsWrapper = tasty({
         placeItems: 'stretch',
         preset: {
             '': 't3m',
-            '[data-size="xsmall"]': 't4',
-            '[data-size="xlarge"]': 't2m',
+            'size=xsmall': 't4',
+            'size=xlarge': 't2m',
         },
         $size: {
             '': '$size-md',
-            '[data-size="xsmall"]': '$size-xs',
-            '[data-size="small"]': '$size-sm',
-            '[data-size="medium"]': '$size-md',
-            '[data-size="large"]': '$size-lg',
-            '[data-size="xlarge"]': '$size-xl',
+            'size=xsmall': '$size-xs',
+            'size=small': '$size-sm',
+            'size=medium': '$size-md',
+            'size=large': '$size-lg',
+            'size=xlarge': '$size-xl',
         },
         Actions: {
             $: '>',

package/es/components/actions/ItemButton/index.js

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

package/es/components/actions/Link/Link.js

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

package/es/components/actions/Menu/Menu.js

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

package/es/components/actions/Menu/MenuItem.js

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

package/es/components/actions/Menu/MenuSection.js

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

package/es/components/actions/Menu/MenuTrigger.js

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

package/es/components/actions/Menu/SubMenuTrigger.js

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

package/es/components/actions/Menu/SubmenuTriggerContext.js

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

package/es/components/actions/Menu/context.js

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

package/es/components/actions/Menu/index.js

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