matcha-components 1.0.8 → 1.0.15

package/src/foundation/sizes/min-heights.mdx

@@ -1,237 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Sizes / Min-height" />
-
-### Min-Height
-
-Nessa seção serão apresentadas as maneiras de se usar as classes para
-Min-height.
-
-#### Pixels
-
-Os tamanhos em pixels das classes são sempre múltiplos de **4**, sendo o mínimo
-0 e o máximo **256**.
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 65 }, (_, index) => {
-                const minHeightValue = index * 4;
-                return (
-                    <tr key={`min-h-${minHeightValue}`}>
-                        <td>min-h-{minHeightValue}</td>
-                        <td>min-height: {minHeightValue}px;</td>
-                    </tr>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-row gap-8">
-            <div class="min-h-4 h-0 w-100-p background-accent"></div>
-            <div class="min-h-8 h-0 w-100-p background-accent"></div>
-            <div class="min-h-12 h-0 w-100-p background-accent"></div>
-            <div class="min-h-16 h-0 w-100-p background-accent"></div>
-            <div class="min-h-20 h-0 w-100-p background-accent"></div>
-        </div>
-        <div>
-            ```html
-            <div class="matcha-card background-bg d-flex-row gap-8">
-                <div class="min-h-4 h-0 w-100-p background-accent">4px min-height</div>
-                <div class="min-h-8 h-0 w-100-p background-accent">8px min-height</div>
-                <div class="min-h-12 h-0 w-100-p background-accent">12px min-height</div>
-                <div class="min-h-16 h-0 w-100-p background-accent">16px min-height</div>
-                <div class="min-h-20 h-0 w-100-p background-accent">20px min-height</div>
-            </div>
-            ```
-        </div>
-    </div>
-
-#### Porcentagem
-
-Os tamanhos em porcentagem das classes são sempre múltiplos de **5**, sendo o
-mínimo 0 e o máximo **100**.
-
-        <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 21 }, (_, index) => {
-                const minHeightValue = index * 5;
-                return (
-                    <tr key={`h-${minHeightValue}-p`}>
-                        <td>min-h-{minHeightValue}-p</td>
-                        <td>min-height: {minHeightValue}%;</td>
-                    </tr>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-row gap-8 h-100">
-            <div class="min-h-20-p h-0 w-100-p background-accent"></div>
-            <div class="min-h-30-p h-0 w-100-p background-accent"></div>
-            <div class="min-h-50-p h-0 w-100-p background-accent"></div>
-            <div class="min-h-75-p h-0 w-100-p background-accent"></div>
-            <div class="min-h-100-p h-0 w-100-p background-accent"></div>
-        </div>
-        <div>
-            ```html
-            <div class="matcha-card background-bg d-flex-row gap-8 h-100">
-                <div class="min-h-20-p h-0 w-100-p background-accent">20% min-height</div>
-                <div class="min-h-30-p h-0 w-100-p background-accent">30% min-height</div>
-                <div class="min-h-50-p h-0 w-100-p background-accent">50% min-height</div>
-                <div class="min-h-75-p h-0 w-100-p background-accent">75% min-height</div>
-                <div class="min-h-100-p h-0 w-100-p background-accent">100% min-height</div>
-            </div>
-            ```
-        </div>
-    </div>
-
-    <div class="h-24"></div>
-
-#### Breakpoints
-
-- xs: 600px
-- sm: 1024px
-- md: 1440px
-- lg: 1920px
-- xl: 2560px
-
-As classes de altura mínima (min-height) seguem a seguinte convenção:
-
-min-h-\{**breakpoint**\}-\{**valorEmPixels**\}
-
-min-h-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
-
-Exemplos:
-
-**min-h-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a
-altura mínima do elemento é definida como 8px.
-
-**min-h-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
-altura mínima do elemento é definida como 75%.
-
-    <div class="h-16"></div>
-
----
-
-    <p class="h5 mb-8 font-size-16">Classes em Pixels:</p>
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                    <th>Breakpoint</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 65 }, (_, index) => {
-                const minHeightValue = index * 4;
-                return (
-                    <>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-xs-{minHeightValue}</td>
-                            <td>min-height: {minHeightValue}px;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-sm-{minHeightValue}</td>
-                            <td>min-height: {minHeightValue}px;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-md-{minHeightValue}</td>
-                            <td>min-height: {minHeightValue}px;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-lg-{minHeightValue}</td>
-                            <td>min-height: {minHeightValue}px;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-xl-{minHeightValue}</td>
-                            <td>min-height: {minHeightValue}px;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                    </>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-16"></div>
-    <p class="h5 mb-8 font-size-16 mt-16">Classes em Porcentagem:</p>
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                    <th>Breakpoint</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 21 }, (_, index) => {
-                const minHeightValue = index * 5;
-                return (
-                    <>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-xs-{minHeightValue}-p</td>
-                            <td>min-height: {minHeightValue}%;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-sm-{minHeightValue}-p</td>
-                            <td>min-height: {minHeightValue}%;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-md-{minHeightValue}-p</td>
-                            <td>min-height: {minHeightValue}%;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-lg-{minHeightValue}-p</td>
-                            <td>min-height: {minHeightValue}%;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`min-h-${minHeightValue}`}>
-                            <td>min-h-xl-{minHeightValue}-p</td>
-                            <td>min-height: {minHeightValue}%;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                    </>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>

package/src/foundation/sizes/min-width.mdx

@@ -1,236 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Sizes / Min-width" />
-
-### Min-Width
-
-Nessa seção serão apresentadas as maneiras de se usar as classes para Min-width.
-
-#### Pixels
-
-Os tamanhos em pixels das classes são sempre múltiplos de **4**, sendo o mínimo
-0 e o máximo **256**.
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 65 }, (_, index) => {
-                const minWidthValue = index * 4;
-                return (
-                    <tr key={`min-w-${minWidthValue}`}>
-                        <td>min-w-{minWidthValue}</td>
-                        <td>min-width: {minWidthValue}px;</td>
-                    </tr>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-column gap-8">
-            <div class="min-w-4 w-0 h-32 background-accent"></div>
-            <div class="min-w-8 w-0 h-32 background-accent"></div>
-            <div class="min-w-12 w-0 h-32 background-accent"></div>
-            <div class="min-w-16 w-0 h-32 background-accent"></div>
-            <div class="min-w-20 w-0 h-32 background-accent"></div>
-        </div>
-        <div>
-            ```html
-            <div class="matcha-card background-bg d-flex-column gap-8">
-                <div class="min-w-4 w-0 h-32 background-accent">4px min-width</div>
-                <div class="min-w-8 w-0 h-32 background-accent">8px min-width</div>
-                <div class="min-w-12 w-0 h-32 background-accent">12px min-width</div>
-                <div class="min-w-16 w-0 h-32 background-accent">16px min-width</div>
-                <div class="min-w-20 w-0 h-32 background-accent">20px min-width</div>
-            </div>
-            ```
-        </div>
-    </div>
-
-#### Porcentagem
-
-Os tamanhos em porcentagem das classes são sempre múltiplos de **5**, sendo o
-mínimo 0 e o máximo **100**.
-
-        <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 21 }, (_, index) => {
-                const minWidthValue = index * 5;
-                return (
-                    <tr key={`min-w-${minWidthValue}-p`}>
-                        <td>min-w-{minWidthValue}-p</td>
-                        <td>min-width: {minWidthValue}%;</td>
-                    </tr>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-column gap-8">
-            <div class="min-w-20-p w-0 h-32 background-accent"></div>
-            <div class="min-w-30-p w-0 h-32 background-accent"></div>
-            <div class="min-w-50-p w-0 h-32 background-accent"></div>
-            <div class="min-w-75-p w-0 h-32 background-accent"></div>
-            <div class="min-w-100-p w-0 h-32 background-accent"></div>
-        </div>
-        <div>
-            ```html
-            <div class="matcha-card background-bg d-flex-column gap-8">
-                <div class="min-w-20-p w-0 h-32 background-accent">20% min-width</div>
-                <div class="min-w-30-p w-0 h-32 background-accent">30% min-width</div>
-                <div class="min-w-50-p w-0 h-32 background-accent">50% min-width</div>
-                <div class="min-w-75-p w-0 h-32 background-accent">75% min-width</div>
-                <div class="min-w-100-p w-0 h-32 background-accent">100% min-width</div>
-            </div>
-            ```
-        </div>
-    </div>
-
-    <div class="h-24"></div>
-
-#### Breakpoints
-
-- xs: 600px
-- sm: 1024px
-- md: 1440px
-- lg: 1920px
-- xl: 2560px
-
-As classes de largura mínima (min-width) seguem a seguinte convenção:
-
-min-w-\{**breakpoint**\}-\{**valorEmPixels**\}
-
-min-w-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
-
-Exemplos:
-
-**min-w-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a
-largura mínima do elemento é definida como 8px.
-
-**min-w-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
-largura mínima do elemento é definida como 75%.
-
-    <div class="h-16"></div>
-
----
-
-    <p class="h5 mb-8 font-size-16">Classes em Pixels:</p>
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                    <th>Breakpoint</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 65 }, (_, index) => {
-                const minWidthValue = index * 4;
-                return (
-                    <>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-xs-{minWidthValue}</td>
-                            <td>min-width: {minWidthValue}px;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-sm-{minWidthValue}</td>
-                            <td>min-width: {minWidthValue}px;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-md-{minWidthValue}</td>
-                            <td>min-width: {minWidthValue}px;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-lg-{minWidthValue}</td>
-                            <td>min-width: {minWidthValue}px;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-xl-{minWidthValue}</td>
-                            <td>min-width: {minWidthValue}px;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                    </>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-16"></div>
-    <p class="h5 mb-8 font-size-16 mt-16">Classes em Porcentagem:</p>
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                    <th>Breakpoint</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 21 }, (_, index) => {
-                const minWidthValue = index * 5;
-                return (
-                    <>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-xs-{minWidthValue}-p</td>
-                            <td>min-width: {minWidthValue}%;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-sm-{minWidthValue}-p</td>
-                            <td>min-width: {minWidthValue}%;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-md-{minWidthValue}-p</td>
-                            <td>min-width: {minWidthValue}%;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-lg-{minWidthValue}-p</td>
-                            <td>min-width: {minWidthValue}%;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`min-w-${minWidthValue}`}>
-                            <td>min-w-xl-{minWidthValue}-p</td>
-                            <td>min-width: {minWidthValue}%;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                    </>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>