feat: data-input-type attribute for field components

.changeset/color-token-fallback.md

@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Added color token fallback syntax `(#color, #fallback)` for robust color hierarchies. Supports nested fallbacks like `(#primary, (#secondary, #default))`. Automatically generates RGB variants for the entire fallback chain, ensuring proper color variable resolution at runtime.
+

.changeset/overlay-min-width-improvement.md

@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Improved overlay width behavior for Picker and FilterPicker components to match their trigger button width, ensuring better visual consistency.
+

.changeset/picker-is-button-prop.md

@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add `isButton` prop support to `Picker`, `FilterPicker`, and `Select` components. The prop is now properly passed to their trigger components (`ItemButton` for Picker/FilterPicker, `Item` for Select), allowing control over button styling. Defaults to `false` to maintain existing behavior.
+

.changeset/pink-rivers-destroy.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Decrease containerPadding of all overlays 12px -> 8px.

.changeset/remove-legacy-at-syntax.md

@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Removed legacy `@` prefix support for custom properties. Use `$` prefix instead (e.g., `$custom-color` instead of `@custom-color`).
+

.changeset/tidy-laws-repair.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Specify `data-input-type` attribute for each field component and improve `qa` prop handling in various field components for consistency.

.cursor/rules/storybook.mdc

@@ -7,7 +7,7 @@ alwaysApply: false
 ### 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
 

.size-limit.cjs

@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '320kB',
+    limit: '310kB',
   },
   {
     name: 'Tree shaking (just a Button)',

.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,7 +75,6 @@
     "@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",
@@ -117,9 +116,9 @@
     "@size-limit/webpack": "^8.2.4",
     "@size-limit/webpack-why": "^8.2.4",
     "@statoscope/cli": "^5.20.1",
-    "@storybook/addon-docs": "^10.0.0",
-    "@storybook/addon-links": "^10.0.0",
-    "@storybook/react-vite": "^10.0.0",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
     "@swc/core": "^1.3.36",
     "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^10.4.1",
@@ -148,7 +147,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^10.0.0",
+    "eslint-plugin-storybook": "^10.0.8",
     "husky": "^6.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -165,7 +164,7 @@
     "react-test-renderer": "^19.1.1",
     "rimraf": "^6.0.1",
     "size-limit": "^8.2.6",
-    "storybook": "^10.0.0",
+    "storybook": "^10.0.8",
     "storybook-addon-turbo-build": "^2.0.1",
     "styled-components": "^6.1.19",
     "swc-loader": "^0.2.6",

src/components/CollectionItem.docs.mdx

@@ -98,7 +98,7 @@ const items = [{
 
 ## Properties
 
-Extends all [Item component](/components/Item) props:
+Extends all [Item component](/docs/content-item--docs) props:
 
 - `children` - Item content
 - `icon` / `rightIcon` - Icons
@@ -296,8 +296,8 @@ const items: User[] = [
 
 ## Related Components
 
-- [Item](/components/Item) - Base item component
-- [ListBox](/components/ListBox) - List with selection
-- [Select](/components/Select) - Dropdown selector
-- [ComboBox](/components/ComboBox) - Searchable input
-- [Menu](/components/Menu) - Action menu
+- [Item](/docs/content-item--docs) - Base item component
+- [ListBox](/docs/forms-listbox--docs) - List with selection
+- [Select](/docs/forms-select--docs) - Dropdown selector
+- [ComboBox](/docs/forms-combobox--docs) - Searchable input
+- [Menu](/docs/actions-menu--docs) - Action menu

src/components/actions/CommandMenu/CommandMenu.stories.tsx

@@ -1,10 +1,3 @@
-import {
-  expect,
-  findByRole,
-  userEvent,
-  waitFor,
-  within,
-} from '@storybook/test';
 import {
   IconArrowBack,
   IconArrowForward,
@@ -18,6 +11,7 @@ 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';

src/components/actions/ItemAction/ItemAction.stories.tsx

@@ -1,4 +1,3 @@
-import { userEvent, within } from '@storybook/test';
 import {
   IconCopy,
   IconEdit,
@@ -8,6 +7,7 @@ import {
   IconStar,
   IconTrash,
 } from '@tabler/icons-react';
+import { userEvent, within } from 'storybook/test';
 
 import { Item } from '../../content/Item';
 import { Space } from '../../layout/Space';

src/components/actions/ItemButton/ItemButton.stories.tsx

@@ -1,10 +1,10 @@
-import { userEvent, within } from '@storybook/test';
 import {
   IconEdit,
   IconExternalLink,
   IconFile,
   IconTrash,
 } from '@tabler/icons-react';
+import { userEvent, within } from 'storybook/test';
 
 import { timeout } from '../../../utils/promise';
 import { ItemAction } from '../ItemAction';

src/components/actions/Menu/Menu.stories.tsx

@@ -1,13 +1,6 @@
 // @ts-nocheck
 // NOTE: Type checking is disabled in this Storybook file to prevent
 // noisy errors from complex generic typings that do not affect runtime behaviour.
-import {
-  expect,
-  findByRole,
-  userEvent,
-  waitFor,
-  within,
-} from '@storybook/test';
 import {
   IconBook,
   IconBulb,
@@ -17,6 +10,7 @@ import {
   IconReload,
 } from '@tabler/icons-react';
 import { useState } from 'react';
+import { expect, findByRole, userEvent, waitFor, within } from 'storybook/test';
 
 import {
   CheckIcon,

src/components/content/Item/Item.stories.tsx

@@ -1,4 +1,3 @@
-import { expect, userEvent, waitFor, within } from '@storybook/test';
 import {
   IconCoin,
   IconEdit,
@@ -7,6 +6,7 @@ import {
   IconUser,
 } from '@tabler/icons-react';
 import { useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { DirectionIcon } from '../../../icons';
 import { baseProps } from '../../../stories/lists/baseProps';