From 677cfafe00f09dc1d6230647eb8d96c7f72aec34 Mon Sep 17 00:00:00 2001
From: Brian Takita <brian.takita@gmail.com>
Date: Mon, 28 Jun 2021 22:49:24 -0400
Subject: [PATCH] fix: prop types for styled element: JSX.IntrinsicElements[T]

---
 src/index.d.ts     |  6 +++---
 test/test.spec.tsx | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 13d815e..478946e 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -25,7 +25,7 @@ export declare function ThemeProvider<
 >(props: T): JSX.Element;
 export declare function useTheme(): unknown;
 export declare function styled<T extends keyof JSX.IntrinsicElements>(
-  tag: T | ((props: JSX.HTMLAttributes<JSX.IntrinsicElements[T]>) => JSX.Element)
+  tag: T | ((props: JSX.IntrinsicElements[T]) => JSX.Element)
 ): <P>(
   args_0:
     | string
@@ -51,8 +51,8 @@ export declare function styled<T extends keyof JSX.IntrinsicElements>(
         }
       ) => string | number | CSSAttribute | undefined)
   )[]
-) => ((props: P & JSX.HTMLAttributes<JSX.IntrinsicElements[T]>) => JSX.Element) & {
-  className: (props: P & JSX.HTMLAttributes<JSX.IntrinsicElements[T]>) => string;
+) => ((props: P & JSX.IntrinsicElements[T]) => JSX.Element) & {
+  className: (props: P & JSX.IntrinsicElements[T]) => string;
 };
 export declare function createGlobalStyles(
   tag: CSSAttribute | TemplateStringsArray | string,
diff --git a/test/test.spec.tsx b/test/test.spec.tsx
index ccf7358..ce5a1b0 100644
--- a/test/test.spec.tsx
+++ b/test/test.spec.tsx
@@ -29,6 +29,23 @@ describe("Simple Styled", () => {
     });
   });
 
+  test("Creates input properly", () => {
+    const Input = styled('input')`
+      width: 5em;
+      text-align: right;
+    `;
+
+    let currentTarget:HTMLInputElement
+    createRoot(() => {
+      const v = (
+        <Input
+          type="number"
+          onchange={evt=>currentTarget = evt.currentTarget}
+        />
+      );
+    })
+  })
+
   test("Test Theming", () => {
     const Div = styled("div")<{ bold: boolean; border: number; color: string }>`
       color: steelblue;