feat: new style injector

.changeset/calm-monkeys-serve.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add @property definition support via `property` method.

.changeset/clever-feet-report.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix MenuItem prop passing.

.changeset/sharp-books-lie.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+A brand new style injector. Drop `styled-components` dependency.

.changeset/smart-pumpkins-exist.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add `tastyDebug` tool for debugging.

.cursor/rules/coding.mdc

@@ -8,6 +8,7 @@ alwaysApply: true
 - Do not run tests if you only changed stories or documentation since the last test run.
 - If you need to move or rename a file: use command line tools for that.
 - If you need to move a part of code from one file to another: First, write the code at the new place, then delete the code in the original place.
+- Don't implement backward compatibility unless asked.
 
 # Coding rules
 

.cursor/rules/guidelines.mdc

@@ -27,6 +27,7 @@ Package name: `@cube-dev/ui-kit`
 
 All tests: `$ pnpm test`
 Specific test: `$ pnpm test -- {TestFileName}`
+Update snaphosts: `$ pnpm test -u -- {TestFileName}`
 
 ## Build
 
@@ -45,7 +46,6 @@ Specific test: `$ pnpm test -- {TestFileName}`
   - `src/stories/CreateComponent.docs.mdx` - create components using tasty helper.
 - Storybook v8.6
 - React and React DOM v18
-- `styled-components` v6
 - `react-aria` and `react-stately` with the latest versions.
 - `tabler/icons-react` - icons.
 
@@ -113,7 +113,7 @@ Specific test: `$ pnpm test -- {TestFileName}`
 - Sub-elements: Target inner elements using capitalized keys in styles
 - Style props: Direct style application without `styles` prop
 - CSS custom properties: Use `@token-name` syntax for design tokens
-- To declare a CSS animation use `styled-components` and then pass the animation name to the tasty styles.
+- To declare a CSS animation use `keyframes` method and then pass the animation name to the tasty styles.
 
 ## Export Patterns
 
@@ -187,7 +187,6 @@ Specific test: `$ pnpm test -- {TestFileName}`
   - `src/stories/CreateComponent.docs.mdx` - create components using tasty helper.
 - Storybook v8.6
 - React and React DOM v18
-- `styled-components` v6
 - `react-aria` and `react-stately` with the latest versions.
 - `tabler/icons-react` - icons.
 
@@ -255,7 +254,7 @@ Specific test: `$ pnpm test -- {TestFileName}`
 - Sub-elements: Target inner elements using capitalized keys in styles
 - Style props: Direct style application without `styles` prop
 - CSS custom properties: Use `@token-name` syntax for design tokens
-- To declare a CSS animation use `styled-components` and then pass the animation name to the tasty styles.
+- To declare a CSS animation use `keyframes` method and then pass the animation name to the tasty styles.
 
 ## Export Patterns
 

.github/workflows/main.yml

@@ -23,17 +23,27 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.14.0
+      - name: Update Corepack
+        run: npm i -g corepack@latest
+
+      - name: Enable Corepack (pre)
+        run: corepack enable
+
+      - name: Prepare pnpm (pre)
+        run: corepack prepare [email protected] --activate
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Prepare pnpm
+        run: corepack prepare [email protected] --activate
+
       - name: Install Dependencies
         run: pnpm install
 
@@ -63,10 +73,14 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.14.0
+      - name: Update Corepack
+        run: npm i -g corepack@latest
+
+      - name: Enable Corepack (pre)
+        run: corepack enable
+
+      - name: Prepare pnpm (pre)
+        run: corepack prepare [email protected] --activate
 
       - uses: actions/cache@v4
         name: Download storybook cache
@@ -82,6 +96,12 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Prepare pnpm
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: pnpm install
 

.github/workflows/pull-request.yml

@@ -27,16 +27,26 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.14.0
+      - name: Update Corepack
+        run: npm i -g corepack@latest
+
+      - name: Enable Corepack (pre)
+        run: corepack enable
+
+      - name: Prepare pnpm (pre)
+        run: corepack prepare [email protected] --activate
 
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Prepare pnpm
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: pnpm install
 
@@ -81,10 +91,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.14.0
+      - name: Update Corepack
+        run: npm i -g corepack@latest
+
+      - name: Enable Corepack (pre)
+        run: corepack enable
+
+      - name: Prepare pnpm (pre)
+        run: corepack prepare [email protected] --activate
 
       - uses: actions/cache@v4
         name: Download eslint cache
@@ -98,6 +112,12 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Prepare pnpm
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: pnpm install
 
@@ -121,10 +141,14 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.14.0
+      - name: Update Corepack
+        run: npm i -g corepack@latest
+
+      - name: Enable Corepack (pre)
+        run: corepack enable
+
+      - name: Prepare pnpm (pre)
+        run: corepack prepare [email protected] --activate
 
       - uses: actions/cache@v4
         name: Download storybook cache
@@ -140,6 +164,12 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Prepare pnpm
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: pnpm install
 

.github/workflows/size-limit.yml

@@ -25,16 +25,26 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.14.0
+      - name: Update Corepack
+        run: npm i -g corepack@latest
 
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
+      - name: Enable Corepack (pre)
+        run: corepack enable
+
+      - name: Prepare pnpm (pre)
+        run: corepack prepare [email protected] --activate
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Prepare pnpm
+        run: corepack prepare [email protected] --activate
+
       - name: Install dependencies
         run: pnpm install
 

.size-limit.cjs

@@ -20,20 +20,20 @@ module.exports = [
         }),
       );
     },
-    limit: '295kB',
+    limit: '305kB',
   },
   {
     name: 'Tree shaking (just a Button)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '26 kB',
+    limit: '32 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '13 kB',
+    limit: '19 kB',
   },
 ];

.storybook/preview.jsx

@@ -6,6 +6,17 @@ import { Root } from '../src';
 
 configure({ testIdAttribute: 'data-qa', asyncUtilTimeout: 10000 });
 
+// Load tasty debug utilities in local Storybook only (exclude Chromatic)
+if (!isChromatic() && import.meta.env.DEV) {
+  import('../src/tasty/debug').then(({ installGlobalDebug }) => {
+    try {
+      installGlobalDebug({ force: true });
+    } catch (e) {
+      console.warn('tastyDebug installation failed:', e);
+    }
+  });
+}
+
 if (isChromatic()) {
   // disabling transitions
   config.disabled = true;

eslint.config.js

@@ -151,7 +151,12 @@ export default [
 
   // Test files override
   {
-    files: ['**/*.test.ts', '**/*.test.tsx'],
+    files: ['**/*.test.ts', '**/*.test.tsx', '**/test/**/*.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+      },
+    },
     rules: {
       'no-unused-vars': 'off',
       'react/prop-types': 'off',