fix(theme): Allow listing values with number keys (#360)

packages/pigment-css-theme/src/theme.ts

@@ -1,15 +1,17 @@
 export interface Theme {}
 
-type Join<K extends string | number, P extends string> = K extends string | number
-  ? P extends ''
-    ? `${K}`
-    : `${P}.${K}`
+type Join<Left, Right, Separator extends string = '.'> = Left extends string | number
+  ? Right extends string | number
+    ? `${Left}${Right extends '' ? '' : Separator}${Right}`
+    : never
   : never;
 
-type PathsToLeaves<T extends object, P extends string = ''> = {
-  [K in keyof T]: T[K] extends object
-    ? PathsToLeaves<T[K], Join<K & string, P>>
-    : Join<K & string, P>;
+type PathsToLeaves<T extends object> = {
+  [K in keyof T]: K extends string | number
+    ? T[K] extends object
+      ? Join<K, PathsToLeaves<T[K]>>
+      : `${K}`
+    : never;
 }[keyof T];
 
 export type ThemeKey = `$${PathsToLeaves<Theme>}`;
@@ -28,7 +30,7 @@ export type ThemeKey = `$${PathsToLeaves<Theme>}`;
  * // override Theme type as per docs
  *
  * const cls1 = css({
- *   border: `1px solid t('$palette.main')`,
+ *   border: `1px solid ${t('$palette.main')}`,
  * })
  * ```
  */

packages/pigment-css-theme/tests/theme.spec.ts

@@ -1,14 +1,33 @@
 import { t } from '../src';
 
+const theme = {
+  gray: {
+    surface: {
+      1: 'hsl(0 0% 99%)',
+      100: 'hsl(0 0% 99%)',
+      '2': 'hsl(0 0% 97.5%)',
+    },
+  },
+  br: {
+    circle: '50%',
+    pill: '9999px',
+  },
+};
+
+type UserTheme = typeof theme;
+
 declare module '../src' {
-  interface Theme {
-    palette: {
-      main: string;
-    };
-  }
+  interface Theme extends UserTheme {}
 }
 
-t('$palette.main');
+t('$gray.surface.1');
+t('$gray.surface.100');
+t('$gray.surface.2');
+// @ts-expect-error 3 does not exist
+t('$gray.surface.3');
+t('$br.circle');
+// @ts-expect-error circle1 does not exist
+t('$br.circle1');
 
 // @ts-expect-error
 t('$palette.secondary');