feat(Root): cursor strategy support

.changeset/unlucky-tables-relax.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Allow to set cursorStrategy to `web` or `native` in Root component.

src/components/HiddenInput.tsx

@@ -19,7 +19,7 @@ export const HiddenInput = tasty({
     height: '100%',
     cursor: {
       '': 'default',
-      button: 'pointer',
+      button: '$pointer',
       disabled: 'not-allowed',
     },
   },

src/components/Root.tsx

@@ -24,7 +24,6 @@ import { PortalProvider } from './portal';
 
 const RootElement = tasty({
   id: 'cube-ui-kit-root',
-  // className: 'root',
 });
 
 const DEFAULT_STYLES = {
@@ -49,6 +48,7 @@ export interface CubeRootProps extends BaseProps {
   monospaceFont?: string;
   applyLegacyTokens?: boolean;
   tracking?: TrackingProps;
+  cursorStrategy?: 'web' | 'native';
 }
 
 const IS_DVH_SUPPORTED =
@@ -70,6 +70,7 @@ export function Root(allProps: CubeRootProps) {
     monospaceFont,
     applyLegacyTokens,
     tracking,
+    cursorStrategy = 'web',
     style,
     ...props
   } = allProps;
@@ -138,6 +139,7 @@ export function Root(allProps: CubeRootProps) {
               '--cube-dynamic-viewport-height': height
                 ? height + 'px'
                 : '100dvh',
+              '--pointer': cursorStrategy === 'web' ? 'pointer' : 'default',
               ...style,
             }}
           >

src/components/actions/Action/Action.tsx

@@ -39,7 +39,7 @@ const ActionElement = tasty({
     padding: 0,
     outline: 0,
     transition: 'theme',
-    cursor: 'pointer',
+    cursor: '$pointer',
     textDecoration: 'none',
     fill: '#clear',
   },

src/components/actions/Button/Button.tsx

@@ -100,8 +100,10 @@ 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',

src/components/actions/ItemAction/ItemAction.tsx

@@ -77,7 +77,7 @@ const ItemActionElement = tasty({
     reset: 'button',
     outline: 0,
     outlineOffset: 1,
-    cursor: { '': 'pointer', disabled: 'default' },
+    cursor: { '': '$pointer', disabled: 'default' },
     padding: {
       '': '0 $inline-padding',
       'with-icon': 0,

src/components/content/CopyPasteBlock/CopyPasteBlock.tsx

@@ -60,7 +60,7 @@ const CopyPasteBlockElement = tasty(Card, {
       ':focus': '2px dashed #purple-text',
       error: 'dashed #danger',
     },
-    cursor: 'pointer',
+    cursor: '$pointer',
     preset: {
       '': 't3',
       '[data-size="large"]': 't2',

src/components/content/Item/Item.tsx

@@ -280,7 +280,8 @@ const ItemElement = tasty({
     outlineOffset: 1,
     cursor: {
       '': 'default',
-      ':is(button) | :is(a)': 'pointer',
+      ':is(a)': 'pointer',
+      ':is(button) | listboxitem | menuitem': '$pointer',
       disabled: 'not-allowed',
     },
 

src/components/fields/Checkbox/Checkbox.tsx

@@ -64,7 +64,7 @@ const CheckboxWrapperElement = tasty({
     gap: '1x',
     flow: 'row',
     preset: 'default',
-    cursor: 'pointer',
+    cursor: '$pointer',
     width: 'max max-content',
     color: '#dark-02',
   },

src/components/fields/FileInput/FileInput.tsx

@@ -43,7 +43,7 @@ const FileInputElement = tasty(Action, {
     },
     border: true,
     radius: true,
-    cursor: 'pointer',
+    cursor: '$pointer',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
 
@@ -91,7 +91,7 @@ const FileInputElement = tasty(Action, {
       left: 0,
       radius: '$content-radius',
       opacity: 0.01,
-      cursor: 'pointer',
+      cursor: '$pointer',
       zIndex: 10,
     },
   },

src/components/fields/ListBox/ListBox.tsx

@@ -191,7 +191,7 @@ const ListBoxCheckboxWrapper = tasty({
     display: 'grid',
     placeItems: 'center',
     placeContent: 'center',
-    cursor: 'pointer',
+    cursor: '$pointer',
     placeSelf: 'stretch',
   },
 });

src/components/fields/Slider/elements.ts

@@ -13,7 +13,7 @@ export const SliderThumbElement = tasty({
       dragged: '#purple',
       disabled: '#dark-04',
     },
-    cursor: 'pointer',
+    cursor: '$pointer',
     outline: {
       '': '#purple-text.0',
       focused: '1bw #purple-text',

src/components/fields/Switch/Switch.tsx

@@ -82,7 +82,7 @@ const SwitchElement = tasty({
     },
     outlineOffset: 1,
     transition: 'theme',
-    cursor: 'pointer',
+    cursor: '$pointer',
 
     Thumb: {
       position: 'absolute',
@@ -116,7 +116,7 @@ const SwitchElement = tasty({
         'checked & [data-size="small"]': '1.25x',
       },
       transition: 'left, theme',
-      cursor: 'pointer',
+      cursor: '$pointer',
     },
   },
 });

src/components/organisms/FileTabs/FileTabs.tsx

@@ -102,7 +102,7 @@ const TabElement = tasty(Action, {
       'disabled, hovered, hovered & disabled': '#dark',
     },
     cursor: {
-      '': 'pointer',
+      '': '$pointer',
       disabled: 'default',
     },
     fontWeight: 500,

src/components/other/Base64Upload/Base64Upload.tsx

@@ -122,7 +122,7 @@ export const Base64Upload = styled(
   }),
 )`
   appearance: none;
-  cursor: pointer;
+  cursor: var(--pointer);
   outline: none;
 
   & input {
@@ -132,7 +132,7 @@ export const Base64Upload = styled(
     bottom: 0;
     left: 0;
     opacity: 0;
-    cursor: pointer;
+    cursor: var(--pointer);
     width: 100%;
     height: 100%;
   }

src/components/other/Calendar/CalendarCell.tsx

@@ -40,7 +40,7 @@ const CalendarButtonElement = tasty({
     },
     outlineOffset: 0.5,
     radius: true,
-    cursor: 'pointer',
+    cursor: '$pointer',
   },
 });
 

src/components/overlays/Tooltip/Tooltip.stories.tsx

@@ -109,7 +109,7 @@ const FunctionPatternTemplate: Story<CubeTooltipProviderProps> = (args) => (
             padding: '8px 16px',
             border: '2px solid #007acc',
             borderRadius: '4px',
-            cursor: 'pointer',
+            cursor: '$pointer',
             display: 'inline-block',
             backgroundColor: '#f0f8ff',
             color: '#333',
@@ -154,7 +154,7 @@ const DirectFunctionPatternTemplate: Story<CubeTooltipTriggerProps> = (
             padding: '4px 8px',
             border: '1px solid #ff6b6b',
             borderRadius: '4px',
-            cursor: 'pointer',
+            cursor: '$pointer',
             display: 'inline-block',
             backgroundColor: '#ffe0e0',
           }}

src/stories/CreateComponent.docs.mdx

@@ -314,7 +314,7 @@ const DEFAULT_ACTION_STYLES: Styles = {
     focused: '#purple-03',
   },
   transition: 'theme',
-  cursor: 'pointer',
+  cursor: '$pointer',
   textDecoration: 'none',
   fill: '#clear',
 } as const;