feat: fixed mod for dimensions

.changeset/afraid-keys-approve.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add `fixed` modifier to `height` and `width` styles. Use `fixed 10x` to set min, base, and max dimensions to the same value, creating a truly fixed size that cannot flex.

chromatic.config.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://www.chromatic.com/config-file.schema.json",
+  "projectId": "Project:cube-ui-kit",
+  "onlyChanged": true,
+  "buildScriptName": "build-storybook",
+  "exitZeroOnChanges": true,
+  "exitOnceUploaded": true
+}
+

package.json

@@ -39,8 +39,9 @@
     "lint": "npm-run-all -p eslint prettier",
     "fix": "npm-run-all -p eslint:fix prettier:fix",
     "storybook": "STORYBOOK_MODE=stories storybook dev -p 6060",
-    "build-storybook": "STORYBOOK_MODE=stories storybook build",
+    "build-storybook": "STORYBOOK_MODE=stories storybook build --stats-json",
     "build-docs": "STORYBOOK_MODE=docs storybook build --docs -o storybook-docs",
+    "chromatic": "chromatic --only-changed",
     "build-static-docs": "npm run build-docs && node scripts/snapshot-docs.js",
     "size": "size-limit",
     "prepare": "husky install",

src/stories/Tasty.docs.mdx

@@ -372,14 +372,15 @@ width: '1x 10x',                  // min-width, max-width
 width: '1x 5x 10x',               // min, value, max
 width: 'min 2x',                  // min-width only ('var(--gap)' default)
 width: 'max 100%',                // max-width only ('100%' default)
+width: 'fixed 10x',               // Fixed size (all three equal: min, value, max)
 width: 'stretch',                 // Fill available space (browser-specific)
 
 // Default values:
 // - Default: 'auto'
 // - Min default: 'var(--gap)'
 // - Max default: '100%'
 // Intrinsic sizing: max-content, min-content, fit-content, stretch
-// Modifiers: min, max
+// Modifiers: min, max, fixed
 // ✅ Prefer unified syntax over separate maxWidth/minWidth properties
 ```
 

src/tasty/styles/dimension.test.ts

@@ -110,4 +110,32 @@ describe('dimensionStyle – width & height helpers', () => {
     expect(parsed.output).toBe('calc-size(fit-content)');
     expect(parsed.groups[0].values).toEqual(['calc-size(fit-content)']);
   });
+
+  test('fixed modifier with pixels', () => {
+    const res = widthStyle({ width: 'fixed 10px' }) as any;
+    expect(res.width).toBe('10px');
+    expect(res['min-width']).toBe('10px');
+    expect(res['max-width']).toBe('10px');
+  });
+
+  test('fixed modifier with gap units', () => {
+    const res = heightStyle({ height: 'fixed 5x' }) as any;
+    expect(res.height).toBe('calc(5 * var(--gap))');
+    expect(res['min-height']).toBe('calc(5 * var(--gap))');
+    expect(res['max-height']).toBe('calc(5 * var(--gap))');
+  });
+
+  test('fixed modifier with rem units', () => {
+    const res = widthStyle({ width: 'fixed 2rem' }) as any;
+    expect(res.width).toBe('2rem');
+    expect(res['min-width']).toBe('2rem');
+    expect(res['max-width']).toBe('2rem');
+  });
+
+  test('fixed modifier with percentage', () => {
+    const res = heightStyle({ height: 'fixed 100%' }) as any;
+    expect(res.height).toBe('100%');
+    expect(res['min-height']).toBe('100%');
+    expect(res['max-height']).toBe('100%');
+  });
 });

src/tasty/styles/dimension.ts

@@ -46,6 +46,15 @@ export function dimensionStyle(name) {
           styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;
           flag = true;
           break;
+        case 'fixed': {
+          // Fixed modifier: set all three dimensions to the same value
+          const fixedValue = values[0] || 'max-content';
+          styles[minStyle] = fixedValue;
+          styles[name] = fixedValue;
+          styles[maxStyle] = fixedValue;
+          flag = true;
+          break;
+        }
         default:
           break;
       }