PR: release/v2.1.0

docs/docs/examples.mdx

@@ -5,16 +5,15 @@ sidebar_label: 'Showcases'
 
 # Showcases
 
+import IframeResizer from '@iframe-resizer/react';
+
 ## Color Picker:
 
 - [Website](https://lizzelabs.github.io/css-colors/)
 - [Github](https://github.com/lizzelabs/css-colors)
 
-<iframe
+<IframeResizer
   src='https://lizzelabs.github.io/css-colors/'
-  width='100%'
-  height='500px'
-  title='Color Picker'
-  frameborder='0'
-  allowfullscreen
-></iframe>
+  style={{ width: '500px', height: '500px' }}
+  inPageLinks
+></IframeResizer>

docs/docs/getting-started/animations.mdx

@@ -11,7 +11,7 @@ We basically have two ways of working with css animations
 
 Example:
 
-```tsx showLineNumbers
+```tsx
 const Main = () => {
   return (
     <Animations
@@ -42,10 +42,9 @@ children of that animation.
 
 ### <small style={{ fontSize: '0.9rem' }} ><b>Property:</b></small> `withStyle`
 
-As I said before, everything is a piece remember ? So you can do at your
-`withStyle` property:
+So you can do at your `withStyle` property:
 
-```tsx showLineNumbers
+```tsx
 
 const Main = () => {
   return (

docs/docs/getting-started/installation.mdx

@@ -50,3 +50,6 @@ export const Main = () => {
   return <PieceProvider patterns={HARMONY_SYSTEM}></PieceProvider>;
 };
 ```
+
+Now,
+[**_Let's talk about Css Systems, How you can implement yours_**](./systems.mdx)

docs/docs/getting-started/overview.mdx

@@ -6,172 +6,175 @@ slug: /
 
 # 📖 Introduction to React Harmony
 
-Nowadays we have a lot of style libs, and many times we dont need to everything
-in each one to build our interfaces, it costs to our users download every css
-class unused, so i think in an easy and elegant way to style all of components
-and how to keep everything easy to mantain and fast to develop new components.
+Nowadays We have a lot of style libs and Many times we dont need to everything
+at our packages. It costs to our users, Mobile data usually is poor at any place
+of the World.
 
-## Main Idea
+If You try to mixture many sort of style libs You'll get a truly hell into your
+codebase. (I got you, no worry sometimes times matter 😂)
 
-Everything you should know about it is: all you need is a piece, I mean
+Why not use something that able us to stylish our components so easily or even
+setting patterns to style components improving our velocity to delivery.
 
-```tsx showLineNumbers live
-function Main(props) {
+I mean with **`@lizzelabs/react-harmony`** you can:
+
+- Set patterns of what you have to style ex:
+
+```tsx showLineNumbers live noInline
+const TitlePattern = {
+  order: 0,
+  applyOn: (props: any) => props.kind === 'title',
+  style: {
+    fontSize: '1rem',
+    fontWeight: 'bold',
+  },
+};
+
+const SubtitlePattern = {
+  order: 0,
+  applyOn: (props: any) => props.kind === 'subtitle',
+  style: {
+    fontSize: '0.859rem',
+    fontWeight: '500',
+  },
+};
+
+function Main() {
   return (
-    <Piece
-      as='div'
-      display='flex'
-      direction='column'
-    >
+    <PieceProvider patterns={[TitlePattern, SubtitlePattern]}>
       <Piece
-        as='div'
-        height='50px'
-        width='50px'
-        background='red'
-      ></Piece>
+        as='h2'
+        kind='title'
+      >
+        Title
+      </Piece>
       <Piece
-        as='label'
-        fontSize='18px'
-        fontWeight='bold'
+        as='h6'
+        kind='subtitle'
       >
-        Hello world!
+        Subtitle
       </Piece>
-      <Piece as='input'></Piece>
-    </Piece>
+    </PieceProvider>
   );
 }
+
+render(<Main />);
 ```
 
-with it now you're able to set patterns to fill your styles, default properties
-through a component called **`PieceProvider`**
+- Even properties:
 
 ```tsx showLineNumbers live noInline
-interface MyCustomTheme {
-  primaryColor: string;
-  textColor: string;
+const ButtonPattern = {
+  order: 0,
+  applyOn: (props: any) => props.kind === 'button',
+  default: {
+    aria: {
+      role: 'button',
+      'aria-label': 'action',
+    },
+  },
+};
+
+function Main() {
+  return (
+    <PieceProvider patterns={[ButtonPattern]}>
+      <Piece
+        as='button'
+        kind='button'
+      >
+        I am accessible.
+      </Piece>
+      <br />
+      <br />
+      <Piece
+        as='button'
+        kind='icon-button'
+      >
+        I am not.
+      </Piece>
+    </PieceProvider>
+  );
 }
 
-interface TitleProps {
-  children?: string;
+render(<Main />);
+```
+
+- Set css-styles directly into **`JSX`**:
+
+```tsx showLineNumbers live
+function Main() {
+  return (
+    <Piece
+      as='div'
+      display='flex'
+      background='red'
+      height='50px'
+      width='50px'
+    />
+  );
+}
+```
+
+- Work with your own **`theme`** between your components:
+
+```tsx live showLineNumbers noInline
+interface MyCustomTheme {
+  primary: string;
+  secondary: string;
+  text: string;
+  fontSize: string;
 }
 
 const Theme = {
-  primaryColor: '#FFF',
-  textColor: '#000',
+  primary: 'red',
+  secondary: 'blue',
+  text: '#FFF',
+  fontSize: '16px',
 } satisfies MyCustomTheme;
 
-const Title = (props: TitleProps) => {
-  return (
-    <label
-      as='h6'
-      kind='title'
-    >
-      {props.children}
-    </label>
-  );
-};
+const ContainerPattern = {
+  order: 0,
+  applyOn: (props: any) => props.kind === 'container',
+  styles: (theme: MyCustomTheme) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
+} satisfies ProviderPattern<Theme, any>;
+
+const LabelPattern = {
+  order: 0,
+  applyOn: (props: any) => props.kind === 'label',
+  styles: (theme: MyCustomTheme) => ({
+    color: theme.text,
+    fontSize: '0.85rem',
+  }),
+} satisfies ProviderPattern<Theme, any>;
 
 const Main = () => {
   return (
     <PieceProvider
       theme={Theme}
-      patterns={[
-        {
-          order: 1,
-          applyOn: 'all',
-          styles: {
-            margin: 0,
-            padding: 0,
-          },
-          defaults: {
-            aria: {
-              'aria-hidden': 'true',
-            },
-          },
-        },
-        {
-          order: 1,
-          applyOn: (props: PieceProperties) => props.kind === 'title',
-          styles: (theme: MyCustomTheme) => ({
-            background: theme.primaryColor,
-            color: theme.textColor,
-          }),
-        },
-      ]}
+      patterns={[ContainerPattern, LabelPattern]}
     >
-      <Title>Now all of title are hidden from assistive technology</Title>
+      <Piece
+        as='div'
+        kind='container'
+        fontSize={(theme: MyCustomTheme) => theme.fontSize}
+        withStyle={(theme: MyCustomTheme) => ({
+          border: `1px solid ${theme.secondary}`,
+        })}
+      >
+        <Piece as='label'>Hello word</Piece>
+      </Piece>
     </PieceProvider>
   );
 };
 
 render(<Main />);
 ```
 
-## Why do it
-
-I make easy to stylish your components with the most powerfull way to do it with
-css in js:
-
-- Allow us to keep the power and core of our business rules for UI into one
-  language, javascript.
-
-so you can do inside your component:
-
-```ts
-import { Piece } from '@lizzelabs/react-harmony';
-
-<Piece textColor={(theme: MyCustomTheme) = theme.textColor} />
-
-// Or
-
-<Piece withStyle={{
-  containerType: 'inline-size',
-  containerName: 'card'
-  flex: '0 0 100%'
-}} >
-    <Piece withStyle={(theme: MyCustomTheme) => ({
-        background: theme.primaryColor,
-        transition: 'all 0.3s ease-in-out',
-        '&:hover': {
-            background: theme.hover,
-        },
-        '@media screen (max-width: 500px)': {
-            background: theme.secondaryColor
-        },
-        '@container card (max-width: 600px)': {
-            textOverflow: 'ellipsis'
-        },
-        '@keyframes fade': {
-            from: {
-                opacity: 0;
-            }
-            to: {
-                opacity: 1;
-            }
-        }
-        }} >
-    Hello world!
-  </Piece>
-</Piece>
-
-```
-
-- You're able to set patterns for sort of components and their styles or default
-  properties.
-- You keep your code easy to maintain.
-- Keeping eveything as js you get the control about everything (you set your
-  rules in css more easy).
+So while your codebase gets more clear you delivery more faster I mean you don't
+need to transition between `css` and `js` It just one language 🤓.
 
-**To keep easy to start you can import the default system flex + grid:**
-
-```js
-import { HARMONY_SYSTEM, PieceProvider } from '@lizzelabs/react-harmony';
-
-export const Main = () => {
-  return (
-    <PieceProvider patterns={HARMONY_SYSTEM}>
-      <RootPage />
-    </PieceProvider>
-  );
-};
-```
+[**_Now let's get start and see how It's easy to install_**](./installation.mdx)