ui: add flex item related types and helper classes

Also includes a solution for transforming input
values for specific classes, to allow transforming
e.g. "flex: true" to "flex: 1".

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: MT Lewis <mtlewis@users.noreply.github.com>

packages/ui/src/css/utilities/flex.css

@@ -67,6 +67,18 @@
     flex-direction: column-reverse;
   }
 
+  .bui-grow {
+    flex-grow: var(--grow);
+  }
+
+  .bui-shrink {
+    flex-shrink: var(--shrink);
+  }
+
+  .bui-basis {
+    flex-basis: var(--basis);
+  }
+
   /* Breakpoint xs */
   @media (min-width: 640px) {
     .xs\:bui-align-start {
@@ -116,6 +128,18 @@
     .xs\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .xs\:bui-grow {
+      flex-grow: var(--grow-xs);
+    }
+
+    .xs\:bui-shrink {
+      flex-shrink: var(--shrink-xs);
+    }
+
+    .xs\:bui-basis {
+      flex-basis: var(--basis-xs);
+    }
   }
 
   /* Breakpoint sm */
@@ -167,6 +191,18 @@
     .sm\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .sm\:bui-grow {
+      flex-grow: var(--grow-sm);
+    }
+
+    .sm\:bui-shrink {
+      flex-shrink: var(--shrink-sm);
+    }
+
+    .sm\:bui-basis {
+      flex-basis: var(--basis-sm);
+    }
   }
 
   /* Breakpoint md */
@@ -218,6 +254,18 @@
     .md\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .md\:bui-grow {
+      flex-grow: var(--grow-md);
+    }
+
+    .md\:bui-shrink {
+      flex-shrink: var(--shrink-md);
+    }
+
+    .md\:bui-basis {
+      flex-basis: var(--basis-md);
+    }
   }
 
   /* Breakpoint lg */
@@ -269,6 +317,18 @@
     .lg\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .lg\:bui-grow {
+      flex-grow: var(--grow-lg);
+    }
+
+    .lg\:bui-shrink {
+      flex-shrink: var(--shrink-lg);
+    }
+
+    .lg\:bui-basis {
+      flex-basis: var(--basis-lg);
+    }
   }
 
   /* Breakpoint xl */
@@ -320,5 +380,17 @@
     .xl\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .xl\:bui-grow {
+      flex-grow: var(--grow-xl);
+    }
+
+    .xl\:bui-shrink {
+      flex-shrink: var(--shrink-xl);
+    }
+
+    .xl\:bui-basis {
+      flex-basis: var(--basis-xl);
+    }
   }
 }

packages/ui/src/hooks/useDefinition/helpers.ts

@@ -102,7 +102,7 @@ export function processUtilityProps<Keys extends string>(
 
   const handleUtilityValue = (
     key: string,
-    val: unknown,
+    inputVal: unknown,
     prefix: string = '',
   ) => {
     // Get utility class configuration for this key
@@ -113,6 +113,11 @@ export function processUtilityProps<Keys extends string>(
       return;
     }
 
+    const val =
+      'transform' in utilityConfig
+        ? utilityConfig.transform(inputVal)
+        : inputVal;
+
     // Check if value is in the list of valid values for this utility
     const values = utilityConfig.values as readonly (string | number)[];
     if (values.length > 0 && values.includes(val as string | number)) {

packages/ui/src/types.ts

@@ -120,6 +120,13 @@ export interface PaddingProps {
 /** @public */
 export interface SpaceProps extends MarginProps, PaddingProps {}
 
+/** @public */
+export interface FlexItemProps {
+  grow?: Responsive<number | boolean>;
+  shrink?: Responsive<number | boolean>;
+  basis?: Responsive<string>;
+}
+
 /** @public */
 export type TextVariants =
   | 'title-large'

packages/ui/src/utils/utilityClassMap.ts

@@ -196,7 +196,29 @@ export const utilityClassMap = {
     class: 'bui-row-span',
     values: columnsValues,
   },
+  grow: {
+    class: 'bui-grow',
+    cssVar: '--grow',
+    values: [],
+    transform: input => (typeof input === 'boolean' ? Number(input) : input),
+  },
+  shrink: {
+    class: 'bui-shrink',
+    cssVar: '--shrink',
+    values: [],
+    transform: input => (typeof input === 'boolean' ? Number(input) : input),
+  },
+  basis: {
+    class: 'bui-basis',
+    cssVar: '--basis',
+    values: [],
+  },
 } as const satisfies Record<
   string,
-  { class: string; cssVar?: string; values: readonly (string | number)[] }
+  {
+    class: string;
+    cssVar?: string;
+    values: readonly (string | number)[];
+    transform?: (input: unknown) => unknown;
+  }
 >;