Refactor button component to use typed props

README.md

@@ -253,6 +253,21 @@ return (
 <p class="a b c d">D</p>
 ```
 
+## Typings
+```ts
+declare type Props = {
+    $size: 'sm' | 'md'
+}
+
+const Button = styled.button<Props>('flex', {
+    $size: {
+        sm: 'font:12 size:8x',
+        md: 'font:14 size:12x'
+    },
+    disabled: 'opacity:.5'
+})
+```
+
 ## Overview `class-variant` APIs
 ```ts
 import cv from 'class-variant'

packages/react/e2e/ApplyBasedOnPredefinedVariants.test.tsx

@@ -2,6 +2,6 @@ import { test, expect } from '@playwright/experimental-ct-react'
 import Element from './ApplyBasedOnPredefinedVariants'
 
 test('element', async ({ mount }) =>
-    await expect(await mount(<Element size="sm" disabled />))
+    await expect(await mount(<Element $size="sm" disabled />))
         .toHaveClass('flex font:12 size:8x opacity:.5')
 )

packages/react/e2e/ApplyBasedOnPredefinedVariants.tsx

@@ -1,11 +1,15 @@
 import styled from '../src';
 
-const Element = styled.button('flex', {
-    size: {
+declare type Props = {
+    $size: 'sm' | 'md'
+}
+
+const Button = styled.button<Props>('flex', {
+    $size: {
         sm: 'font:12 size:8x',
         md: 'font:14 size:12x'
     },
     disabled: 'opacity:.5'
 })
 
-export default Element
+export default Button