Update ComponentStyles type to override selectors w/ typed keys (#1613)

segmentio · Feb 6, 2023 · 2600c2c · 2600c2c
1 parent d6d8509
commit 2600c2c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -337,9 +337,11 @@ type PolymorphicBoxPropsOrTokens<T extends Components = Components> = Omit<
   TokenizableProps
 > & { [key in TokenizableProps]?: string }
 
-export type StyleProps<T extends Components = Components> = {
-  [key in ComponentPseudoSelectors<T>]: PolymorphicBoxPropsOrTokens<T>
-} & PolymorphicBoxPropsOrTokens<T>
+export type StyleProps<T extends Components = Components> = Omit<PolymorphicBoxPropsOrTokens<T>, 'selectors'> & {
+  selectors: Partial<{
+    [key in ComponentPseudoSelectors<T>]: PolymorphicBoxPropsOrTokens<T>
+  }>
+}
 
 export type ComponentStyle<T extends Components = Components> = {
   baseStyle?: Partial<StyleProps<T>>

diff --git a/index.test-d.ts b/index.test-d.ts
@@ -34,11 +34,13 @@ const themeOverridesOrAdditions: ThemeOverrides = {
         primary: {
           color: 'white',
           backgroundColor: '#fc7ef8',
-          _hover: {
-            backgroundColor: '#fc03f0'
-          },
-          _focus: {
-            boxShadow: '0 0 0 2px #fccafa'
+          selectors: {
+            _hover: {
+              backgroundColor: '#fc03f0'
+            },
+            _focus: {
+              boxShadow: '0 0 0 2px #fccafa'
+            }
           }
         },
         warning: {