WIP(ts): try TS guard for col span number

packages/react/src/Grid/Grid.tsx

@@ -9,6 +9,38 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { GridCell } from './GridCell'
 import { paddingClasses } from './paddingClasses'
 
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+  ? Acc[number]
+  : Enumerate<N, [...Acc, Acc['length']]>
+
+export type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>
+
+export type ValidSpan<Start extends number> = Start extends 12
+  ? Range<1, 13>
+  : Start extends 11
+    ? Range<1, 12>
+    : Start extends 10
+      ? Range<1, 11>
+      : Start extends 9
+        ? Range<1, 10>
+        : Start extends 8
+          ? Range<1, 9>
+          : Start extends 7
+            ? Range<1, 8>
+            : Start extends 6
+              ? Range<1, 7>
+              : Start extends 5
+                ? Range<1, 6>
+                : Start extends 4
+                  ? Range<1, 5>
+                  : Start extends 3
+                    ? Range<1, 4>
+                    : Start extends 2
+                      ? Range<1, 3>
+                      : Start extends 1
+                        ? 1
+                        : never
+
 export type GridNarrowColumnNumber = 1 | 2 | 3 | 4
 export type GridMediumColumnNumber = GridNarrowColumnNumber | 5 | 6 | 7 | 8
 export type GridWideColumnNumber = GridMediumColumnNumber | 9 | 10 | 11 | 12

storybook/src/components/Grid/Grid.stories.tsx

@@ -173,3 +173,21 @@ export const ImproveSemantics: CellStory = {
     </Grid.Cell>
   ),
 }
+
+export const GridCellWithClassNames: CellStory = {
+  ...CellStoryTemplate,
+  render: () => (
+    <Grid.Cell className="ams-grid__cell--span-2 ams-grid__cell--span-6-wide ams-grid__cell--start-4 ams-grid__cell--start-8-medium ams-grid__cell--start-5-wide">
+      <div className="ams-docs-item" />
+    </Grid.Cell>
+  ),
+}
+
+export const StartPositionAndSpan: CellStory = {
+  ...CellStoryTemplate,
+  args: {
+    children: <div className="ams-docs-item" />,
+    span: { narrow: 2, medium: 5, wide: 12 },
+    start: { narrow: 1, medium: 4, wide: 7 },
+  },
+}