feat: add css prop events

package.json

@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.0.5",
+  "version": "2.1.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",

src/components/atoms/X/X.stories.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs'
+
+import { Canvas } from 'core/storybookWrappers'
+
+import { X } from './X'
+
+<Meta title='Components/X' />
+
+# X
+
+The most powerful component from the design system. This is the FUTURE!
+
+X component can exist as any HTML tag.
+
+Remember, it uses all the theme settings as well as other components.
+
+## Usage
+
+Try using:
+
+```tsx
+<X.div>something here</X.div>
+```
+
+You can pass all the style props, see one example:
+
+```tsx
+<X.div bg='blue'>something here</X.div>
+```
+
+And you can pass css events and much more:
+
+```tsx
+<X.div bg={{ _: 'blue', hover: 'red' }}>something here</X.div>
+```
+
+See the docs for this feature [here](https://xstyled.dev/docs/hover-focus-other-states/).
+
+This example running:
+
+<Canvas>
+  <X.div bg={{ _: 'blue', hover: 'red' }}>something here</X.div>
+</Canvas>

src/components/atoms/X/X.ts

@@ -0,0 +1,5 @@
+import { x } from '@xstyled/styled-components'
+
+const X = x
+
+export { X }

src/components/atoms/X/index.ts

@@ -0,0 +1 @@
+export * from './X'

src/components/atoms/index.ts

@@ -8,3 +8,4 @@ export * from './Divider'
 export * from './Label'
 export * from './Span'
 export * from './A'
+export * from './X'

src/theme/css/preflight.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
 
-<Meta title='CSS/Preflight' />
+<Meta title='Docs/CSS/Preflight' />
 
 # Preflight
 

src/theme/internal/defaultTheme.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
 
-<Meta title='Settings/Theming' />
+<Meta title='Docs/Settings/Theming' />
 
 # Defaults
 
@@ -10,7 +10,7 @@ account the community's best practices, so it is highly recommended to
 only overwrite what is really necessary.
 
 A React provider called `ThemeProvider` is used to set all theme values in your project.
-See `Exports/Providers` in this documentation for more information about this component.
+See `Docs/Exports/Providers` in this documentation for more information about this component.
 
 **Important:** You don't need to set the whole theme from
 scratch if you are creating custom theme.
@@ -41,7 +41,7 @@ export default RootApp
 For more information about how to use and define the custom themes,
 see the [themes](https://xstyled.dev/docs/theme/) section of xstyled
 documentation. Take a look at how to change the specific default colors
-of design system components in the `Settings/Default Colors` section.
+of design system components in the `Docs/Settings/Default Colors` section.
 
 ## Defaults Definition
 
@@ -208,4 +208,4 @@ export const defaultTheme = {
 }
 ```
 
-The colors is defined with another method. See `Settings/Default Colors`.
+The colors is defined with another method. See `Docs/Settings/Default Colors`.

src/theme/internal/defaultTheme.ts

@@ -10,6 +10,7 @@ import radii from './themeAssets/radii'
 import screens from './themeAssets/screens'
 import shadows from './themeAssets/shadows'
 import space from './themeAssets/space'
+import states from './themeAssets/states'
 import transitionProperties from './themeAssets/transitionProperties'
 
 export const defaultTheme = {
@@ -23,6 +24,7 @@ export const defaultTheme = {
   screens,
   shadows,
   space,
+  states,
   transitionProperties,
   colors: defaultColors,
 }

src/theme/internal/themeAssets/states.ts

@@ -0,0 +1,20 @@
+const states = {
+  _: null,
+  motionSafe: '@media (prefers-reduced-motion: no-preference)',
+  motionReduce: '@media (prefers-reduced-motion: reduce)',
+  first: '&:first-child',
+  last: '&:last-child',
+  odd: '&:odd',
+  even: '&:even',
+  visited: '&:visited',
+  checked: '&:checked',
+  focusWithin: '&:focus-within',
+  hover: '&:hover',
+  focus: '&:focus',
+  focusVisible: '&:focus-visible',
+  active: '&:active',
+  disabled: '&:disabled, &[aria-disabled=true]',
+  placeholder: '&::placeholder',
+}
+
+export default states

src/theme/providers.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
 
-<Meta title='Exports/Providers' />
+<Meta title='Docs/Exports/Providers' />
 
 # Providers
 
@@ -29,9 +29,9 @@ export default RootApp
 ```
 
 **Important:** You don't need to set the whole theme from scratch.
-Look `Settings/Theming` in this documentation for more information.
+Look `Docs/Settings/Theming` in this documentation for more information.
 
 For more information about how to use and define the custom themes,
 see the [themes](https://xstyled.dev/docs/theme/) section of xstyled
 documentation. Take a look at how to change the specific default colors
-of design system components in the `Settings/Default Colors` section.
+of design system components in the `Docs/Settings/Default Colors` section.

src/theme/styling.stories.mdx

@@ -0,0 +1,100 @@
+import { Meta } from '@storybook/addon-docs'
+
+import { Canvas } from 'core/storybookWrappers'
+
+import { Box } from 'components/atoms/Box'
+
+<Meta title='Docs/Styling' />
+
+# Advanced props
+
+You can pass css events to all design system components like:
+
+```tsx
+<Box p='2rem' bg={{ _: 'blue', hover: 'red' }} color={{ _: 'white', hover: 'black' }}>
+  something here
+</Box>
+```
+
+This example running (try hover):
+
+<Canvas>
+  <Box p='2rem' bg={{ _: 'blue', hover: 'red' }} color={{ _: 'white', hover: 'black' }}>
+    something here
+  </Box>
+</Canvas>
+
+## Using reponsive states
+
+States and breakpoints can be seemlessly mixed, every screens defined in theme are a `@media (min-width: ...)` state.
+
+```jsx preview color=fuchsia
+<>
+  <template preview>
+    <x.div textAlign='center'>
+      <x.button
+        type='button'
+        py={2}
+        px={4}
+        bg={{
+          _: { _: 'indigo-500', hover: 'indigo-700' },
+          md: { _: 'fuchsia-500', hover: 'fuchsia-700' },
+        }}
+        color='white'
+        fontWeight='semibold'
+        borderRadius='lg'
+        boxShadow='md'
+        outline={{ focus: 'none ' }}
+        tabindex='-1'
+      >
+        Cameleon button
+      </x.button>
+    </x.div>
+  </template>
+  <x.button
+    bg={{
+      _: { _: 'indigo-500', hover: 'indigo-700' },
+      md: { _: 'fuchsia-500', hover: 'fuchsia-700' },
+    }}
+  >
+    Cameleon button
+  </x.button>
+</>
+```
+
+## Available states
+
+Default theme includes a set of useful states.
+
+| State Prefix   | CSS Scope                                        |
+| -------------- | ------------------------------------------------ |
+| `motionSafe`   | `@media (prefers-reduced-motion: no-preference)` |
+| `motionReduce` | `@media (prefers-reduced-motion: reduce)`        |
+| `first`        | `&:first-child`                                  |
+| `last`         | `&:last-child`                                   |
+| `odd`          | `&:odd`                                          |
+| `even`         | `&:even`                                         |
+| `visited`      | `&:visited`                                      |
+| `checked`      | `&:checked`                                      |
+| `hover`        | `&:hover`                                        |
+| `focus`        | `&:focus`                                        |
+| `focusVisible` | `&:focus-visible`                                |
+| `focusWithin`  | `&:focus-within`                                 |
+| `active`       | `&:active`                                       |
+| `disabled`     | `&:disabled, &[aria-disabled=true]`              |
+| `placeholder`  | `&::placeholder`                                 |
+
+## Customizing states
+
+You can completely customize states in your theme:
+
+```ts
+export const theme = {
+  states: {
+    firstLetter: '&::first-letter',
+    dark: '.xstyled-color-mode-dark &&',
+  },
+}
+```
+
+See the full docs for this feature [here](https://xstyled.dev/docs/hover-focus-other-states/).

src/types/styled.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
 
-<Meta title='Exports/Types' />
+<Meta title='Docs/Exports/Types' />
 
 # Types
 

src/utils/styled.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
 
-<Meta title='Exports/Utils' />
+<Meta title='Docs/Exports/Utils' />
 
 # Utils
 

src/utils/theme.stories.mdx

@@ -4,7 +4,7 @@ import { Canvas } from 'core/storybookWrappers'
 
 import defaultColors from 'constants/defaultColors.json'
 
-<Meta title='Settings/Default Colors' />
+<Meta title='Docs/Settings/Default Colors' />
 
 # Changing Default Colors