fix exported types

examples/example/App.tsx

@@ -15,7 +15,12 @@ import {
 // Import from core
 import { H4 } from '@dripsy/core'
 import { Gradient } from '@dripsy/gradient'
-import { Text, TextInput, View as NativeView } from 'react-native'
+import {
+  Text,
+  TextInput,
+  View as NativeView,
+  KeyboardAvoidingView,
+} from 'react-native'
 
 const theme = makeTheme({
   colors: {
@@ -137,6 +142,61 @@ export type TestElement = MyViewElement extends never ? never : 'ok'
 // should not have TS errors because element type should not be never ✅
 export const testElement: { el: TestElement } = { el: 'ok' }
 
+export const ExtendedComp = styled(KeyboardAvoidingView)({})
+
+export const ExtendedCompWithExtraProps = styled<
+  React.ComponentProps<typeof KeyboardAvoidingView> & { custom?: boolean }
+>(KeyboardAvoidingView)({})
+
+export const ExtendedCompWithExtraProps2 = styled(KeyboardAvoidingView)<
+  React.ComponentProps<typeof KeyboardAvoidingView> & { custom?: boolean }
+>({})
+
+export const ExtendA = () => (
+  <ExtendedComp
+    /* @ts-expect-error behavior cannot be 'test' */
+    behavior="test"
+  />
+)
+/* should not error */
+export const ExtendB = () => <ExtendedComp behavior="padding" />
+export const ExtendC = () => (
+  <ExtendedComp
+    /* @ts-expect-error custom does not exist */
+    custom="test"
+  />
+)
+export const ExtendE = () => (
+  <ExtendedCompWithExtraProps
+    /* @ts-expect-error behavior cannot be 'test' */
+    behavior="test"
+  />
+)
+/* should not error */
+export const ExtendF = () => <ExtendedCompWithExtraProps behavior="padding" />
+export const ExtendG = () => (
+  <ExtendedCompWithExtraProps
+    /* @ts-expect-error custom cannot be string */
+    custom="test"
+  />
+)
+/* should not error */
+export const ExtendH = () => <ExtendedCompWithExtraProps custom={false} />
+export const ExtendI = () => <ExtendedCompWithExtraProps2 behavior="test" />
+
+/* should not error */
+export const ExtendJ = () => <ExtendedCompWithExtraProps2 behavior="padding" />
+
+export const ExtendK = () => (
+  <ExtendedCompWithExtraProps2
+    /* @ts-expect-error custom cannot be string */
+    custom="test"
+  />
+)
+
+/* should not error */
+export const ExtendL = () => <ExtendedCompWithExtraProps2 custom={false} />
+
 const ResponsiveSquare = () => {
   // Return literal values:
   const textColor = useResponsiveValue(['red', 'green', 'blue'])

packages/core/src/css/create-themed-component.tsx

@@ -12,7 +12,7 @@ type PropsWithStyledProps<P, ThemeKey extends keyof DripsyFinalTheme> = P &
   StyledProps<ThemeKey>
 
 // prettier-ignore
-type Props<C, ExtraProps, ThemeKey extends keyof DripsyFinalTheme> = C extends ComponentType<infer BaseProps>
+export type Props<C, ExtraProps, ThemeKey extends keyof DripsyFinalTheme> = C extends ComponentType<infer BaseProps>
   ? MergeProps<PropsWithoutVariants<BaseProps>, PropsWithStyledProps<ExtraProps, ThemeKey>>
   : never
 

packages/core/src/css/styled.tsx

@@ -16,8 +16,10 @@ import type { ThemedOptions } from './types'
  * ```
  *
  */
+
 export function styled<
-  C extends ComponentType<any>,
+  Props,
+  C extends ComponentType<any> = ComponentType<Props>,
   ThemeKey extends keyof DripsyFinalTheme = keyof DripsyFinalTheme
 >(
   Component: C,