feat(Item): show actions on hover

Author: tenphi

.changeset/item-show-actions-on-hover.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add `showActionsOnHover` prop to Item component. When enabled, actions are hidden by default and revealed smoothly on hover, focus, or focus-within states using opacity transitions. This provides a cleaner interface while keeping actions easily accessible without content shifting.
+

.cursor/rules/documentation.mdc

@@ -1,5 +1,5 @@
 ---
-description: When updating the component documentation file *.docs.mdx
+description: When creating or updating the component documentation file *.docs.mdx
 alwaysApply: false
 ---
 # Component Documentation Guidelines

.cursor/rules/storybook.mdc

@@ -1,13 +1,13 @@
 ---
-description: When updating storybook files and documentatino files *.stories.tsx, *.docs.mdx
+description: When creating or updating storybook files and documentatino files *.stories.tsx, *.docs.mdx
 alwaysApply: false
 ---
 ## Imports
 
 ### Stories Files (.stories.tsx)
 - Import types: `import type { Meta, StoryObj } from '@storybook/react-vite';`
 - Import `StoryFn` for custom template functions
-- For interactive tests: `import { userEvent, within } from 'storybook/test';` (NOT from `@testing-library/react`)
+- For interactive tests: `import { userEvent, within } from '@storybook/test';` (NOT from `@testing-library/react`)
 
 ### Documentation Files (.docs.mdx)
 - `import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';`
@@ -103,7 +103,7 @@ export const Interactive: StoryObj = {
 };
 ```
 
-**Important:** Always import `userEvent` and `within` from `'storybook/test'` in story files. This ensures they respect Storybook's configuration (e.g., `testIdAttribute: 'data-qa'` set in `.storybook/preview.jsx`). Do NOT use `@testing-library/react` imports in stories.
+**Important:** Always import `userEvent` and `within` from `'@storybook/test'` in story files. This ensures they respect Storybook's configuration (e.g., `testIdAttribute: 'data-qa'` set in `.storybook/preview.jsx`). Do NOT use `@testing-library/react` imports in stories.
 
 ## MDX Documentation Structure
 

.storybook/preview.jsx

@@ -1,6 +1,6 @@
+import { configure } from '@storybook/test';
 import isChromatic from 'chromatic/isChromatic';
 import { config } from 'react-transition-group';
-import { configure } from 'storybook/test';
 
 import { Root } from '../src';
 

package.json

@@ -75,6 +75,7 @@
     "@react-stately/utils": "^3.10.8",
     "@react-types/shared": "^3.31.0",
     "@sparticuz/chromium": "^137.0.1",
+    "@storybook/test": "^8.6.14",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",

pnpm-lock.yaml

@@ -1,3 +1,10 @@
+import {
+  expect,
+  findByRole,
+  userEvent,
+  waitFor,
+  within,
+} from '@storybook/test';
 import {
   IconArrowBack,
   IconArrowForward,
@@ -11,7 +18,6 @@ import {
   IconSelect,
 } from '@tabler/icons-react';
 import React, { useState } from 'react';
-import { expect, findByRole, userEvent, waitFor, within } from 'storybook/test';
 
 import { EditIcon, TrashIcon } from '../../../icons';
 import { tasty } from '../../../tasty';