fix: use div as default tag

Author: sastan

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 [these people](https://github.com/tw-in-js/twind-content/graphs/contributors)
+Copyright (c) 2021 [these people](https://github.com/tw-in-js/twind-react/graphs/contributors)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -26,19 +26,73 @@ yarn add @twind/react
 
 > Please see [twind/style](https://twind.dev/docs/modules/twind_style.html) for config examples.
 
+[![Try this example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/twind-react-styled-90y9n?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark)
+
 ```jsx
-const Button = styled('button', {
-  base: 'text-base',
+import { styled } from "@twind/react"
+
+const Box = styled()
+
+const Button = styled("button", {
+  base: `
+    appearance-none border-none bg-transparent
+    rounded-full px-2.5
+  `,
+
   variants: {
     size: {
-      sm: `text-sm`,
-      lg: `text-lg`,
+      sm: `text-sm h-6`,
+      md: `text-base h-9`,
+    },
+
+    variant: {
+      gray: `
+        bg-gray-500
+        hover:bg-gray-600
+      `,
+      primary: `
+        text-white bg-purple-500
+        hover:bg-purple-600
+      `,
     },
+    outlined: {
+      true: `bg-transparent ring-1`,
+    },
+  },
+
+  defaults: {
+    variant: "gray",
+    size: "sm",
   },
+
+  matches: [
+    {
+      variant: "gray",
+      outlined: true,
+      use: `ring-gray-500`,
+    },
+    {
+      variant: "primary",
+      outlined: true,
+      use: `text-purple-500 ring-gray-500 hover:text-white`,
+    },
+  ],
 })
 
-<Button>Click Me</Button>
-<Button size="lg">Click Me</Button>
+<Box tw="m-2.5 flex flex-wrap" css={{ gap: "20px" }}>
+  <Button>Button</Button>
+  <Button variant="gray">Gray Button</Button>
+  <Button variant="primary">Primary Button</Button>
+  <Button variant="gray" outlined>
+    Outlined Gray Button
+  </Button>
+  <Button variant="primary" outlined>
+    Outlined Primary Button
+  </Button>
+  <Button variant="primary" outlined size={{ initial: "sm", lg: "md" }}>
+    Responsive Primary Button
+  </Button>
+</Box>
 ```
 
 ## License

index.ts

@@ -85,15 +85,15 @@ export function styled<Variants, BaseVariants, Tag extends React.ElementType>(
   config?: StyledOptions & StyleConfig<Variants, BaseVariants>,
 ): StyledComponent<BaseVariants & Variants, Tag> & string
 
-export function styled<Variants, Tag extends React.ElementType>(
+export function styled<Variants, Tag extends React.ElementType = 'div'>(
   this: TW | null | undefined | void,
   tag?: Tag,
   config?: StyledOptions & StyleConfig<Variants>,
 ): StyledComponent<Variants, Tag> & string
 
 export function styled<Tag extends React.ElementType, Variants>(
   this: TW | null | undefined | void,
-  tag: Tag = 'span' as Tag,
+  tag: Tag = 'div' as Tag,
   { shouldForwardProp = isPropValid, ...config }: StyledOptions & StyleConfig<Variants> = {},
 ) {
   const tw = this || defaultTW
@@ -114,7 +114,7 @@ export function styled<Tag extends React.ElementType, Variants>(
 
   const sc = React.forwardRef(
     <T extends React.ElementType = Tag>(
-      { as = tag as unknown as T, ...props }: PolymorphicPropsWithRef<StyleProps<Variants>, T>,
+      { as = (tag as unknown) as T, ...props }: PolymorphicPropsWithRef<StyleProps<Variants>, T>,
       ref: React.ForwardedRef<any>,
     ) =>
       React.createElement(as, {

test.tsx

@@ -49,10 +49,7 @@ test('styled', ({ sheet, styled }) => {
     </Button>,
   )
 
-  assert.is(
-    markup,
-    '<button type="button" class="tw-xz6gsm tw-jo04kc x">Click Me</button>',
-  )
+  assert.is(markup, '<button type="button" class="tw-xz6gsm tw-jo04kc x">Click Me</button>')
 
   assert.equal(sheet.target, ['.tw-xz6gsm{font-size:1.125rem;line-height:1.75rem}'])
   // const ExtendedButton = styled(Button, {