matcha-components 20.15.0 → 20.16.0

package/src/documentation/foundation/typography/line-clamp.mdx

@@ -1,145 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundation / Typography / Line Clamp" />
-
-# Line Clamp
-
-O utilitário `line-clamp` é usado para limitar o número de linhas de um texto, adicionando reticências (`...`) no final do texto quando ele excede o número de linhas especificado.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.line-clamp-#{$lines}#{$infix}#{$has-important}` => `.line-clamp-3-md--force`.
-
-### Exemplos
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg flex-column gap-16">
-        <div class="background-surface px-24 radius-6"><p class="fs-16 lh-20 line-clamp-1">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem. Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem.</p></div>
-        <div class="background-surface px-24 radius-6"><p class="fs-16 lh-20 line-clamp-2">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem. Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem.</p></div>
-        <div class="background-surface px-24 radius-6"><p class="fs-16 lh-20 line-clamp-3">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem. Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem.</p></div>
-        <div class="background-surface px-24 radius-6"><p class="fs-16 lh-20 line-clamp-4">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem. Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem.</p></div>
-        <div class="background-surface px-24 radius-6"><p class="fs-16 lh-20 line-clamp-5">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem. Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem.</p></div>
-    </div>
-    <div>
-        ```html
-        <p class="fs-16 line-clamp-1"></p>
-        <p class="fs-16 line-clamp-2"></p>
-        <p class="fs-16 line-clamp-3"></p>
-        <p class="fs-16 line-clamp-4"></p>
-        <p class="fs-16 line-clamp-5"></p>
-        ```
-    </div>
-</div>
-
-### Atributos
-
-<div class="h-400 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: 6 }, (_, index) => {
-                const lines = index + 1;
-                return (
-                    <tr key={`line-clamp-${lines}`}>
-                        <td>{`line-clamp-${lines}`}</td>
-                        <td>{`-webkit-line-clamp: ${lines};`}</td>
-                    </tr>
-                );
-            })}
-        </tbody>
-    </table>
-</div>
-
----
-
-### Breakpoints
-
-- xs: 600px
-- sm: 1024px
-- md: 1440px
-- lg: 1920px
-- xl: 2560px
-
----
-
-### Classes de Line Clamp com breakpoint
-
-<div class="h-400 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: 6 }, (_, index) => {
-                const lines = index + 1;
-                return (
-                    <>
-                        {[
-                            { 'name': 'xs', 'value': '600px' },
-                            { 'name': 'sm', 'value': '1024px' },
-                            { 'name': 'md', 'value': '1440px' },
-                            { 'name': 'lg', 'value': '1920px' },
-                            { 'name': 'xl', 'value': '2560px' }
-                        ].map((breakpoint) => (
-                            <tr key={`line-clamp-${lines}-${breakpoint.name}`}>
-                                <td>{`line-clamp-${lines}-${breakpoint.name}`}</td>
-                                <td>{`-webkit-line-clamp: ${lines};`}</td>
-                                <td>{`@media only screen and (min-width: ${breakpoint.value})`}</td>
-                            </tr>
-                        ))}
-                    </>
-                );
-            })}
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-
-Para utilizar as classes de _Line Clamp_, você pode fazer de duas formas:
-
-Primeira opção, você pode importar o pacote matcha-core no seu projeto.
-
-1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
-
-`npm install matcha-core`
-
-2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação via estilo global:</span>
-    <div class="flex-column">
-        ```css
-        @import 'node_modules/matcha-core/matcha-core.min.css';
-        ```
-    </div>
-
-    <span class="h6">Importação via angular.json:</span>
-    <div class="flex-column">
-        ```js
-        "styles": [
-            "node_modules/matcha-core/matcha-core.min.css"
-        ]
-        ```
-    </div>
-</div>
-
-Segunda opção, você pode importar o pacote diretamente no seu HTML.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação na tag header do HTML</span>
-    <div class="flex-column">
-        ```html
-        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
-        ```
-    </div>
-</div>

package/src/documentation/foundation/typography/line-height.mdx

@@ -1,52 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundation / Typography / Line-height" />
-
-### Line-height
-
-O line-height é usado para controlar a altura da linha em um bloco de texto,
-afetando o espaço entre as linhas de texto.
-
-#### Pixels
-
-Os tamanhos em pixels dessas classes são sempre múltiplos de **2**, sendo o
-mínimo **2** e o máximo **72**.
-
-    <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: 36 }, (_, index) => {
-                const fontSizeValue = (index + 1)* 2;
-                return (
-                    <tr key={`lh-${fontSizeValue}`}>
-                        <td>lh-{fontSizeValue}</td>
-                        <td>line-height: {fontSizeValue}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 flex-column gap-16">
-        <div class="matcha-card background-bg flex-row gap-8">
-            <p class="fs-16 lh-20 background-surface p-8 radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
-            <p class="fs-16 lh-32 background-surface p-8 radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
-        </div>
-        <div>
-            ```html
-            <p class="fs-16 lh-20">line-height: 20px</p>
-            <p class="fs-16 lh-32">line-height: 32px</p>
-            ```
-        </div>
-    </div>

package/src/documentation/foundation/typography/message-box.mdx

@@ -1,43 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundation / Typography / Message Boxes" />
-
-### Message Boxes
-
-Um message box é geralmente usado para exibição de mensagens.
-
-    <p class="h5 mb-8 font-size-16 mt-4">Classes</p>
-
-
-    <div class="matcha-card background-surface flex-column gap-16">
-        <div class="matcha-card background-bg flex-column gap-16">
-            <div class="message-box error w-200">
-                <p>Message box error</p>
-            </div>
-            <div class="message-box warning w-200">
-                <p>Message box warning</p>
-            </div>
-            <div class="message-box success w-200">
-                <p>Message box success</p>
-            </div>
-            <div class="message-box info w-200">
-                <p>Message box info</p>
-            </div>
-        </div>
-        <div>
-            ```html
-            <div class="message-box error w-200">
-                <p>Message box error</p>
-            </div>
-            <div class="message-box warning w-200">
-                <p>Message box warning</p>
-            </div>
-            <div class="message-box success w-200">
-                <p>Message box success</p>
-            </div>
-            <div class="message-box info w-200">
-                <p>Message box info</p>
-            </div>
-            ```
-        </div>
-    </div>

package/src/documentation/foundation/typography/paragraph.mdx

@@ -1,165 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundation / Typography / Paragraph" />
-
-# Paragraph
-
-As classes de parágrafo são usadas para definir o tamanho do texto dos parágrafos, variando de `par-xs` a `par-xl`.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.par-#{$size}#{$infix}#{$has-important}` => `.par-md--force`.
-
-### Exemplos
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg flex-column gap-16">
-        <p class="par-xs">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-sm">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-md">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-lg">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-xl">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-    </div>
-    <div>
-        ```html
-        <p class="par-xs">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-sm">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-md">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-lg">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        <p class="par-xl">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-        ```
-    </div>
-</div>
-
-### Atributos
-
-<div class="w-100-p overflow-y-scroll">
-    <table class="w-100-p">
-        <thead>
-            <tr>
-                <th>Classe</th>
-                <th>Propriedade</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>par-xs</td>
-                <td>font-size: 12px; line-height: 16px;</td>
-            </tr>
-            <tr>
-                <td>par-sm</td>
-                <td>font-size: 14px; line-height: 20px;</td>
-            </tr>
-            <tr>
-                <td>par-md</td>
-                <td>font-size: 16px; line-height: 24px;</td>
-            </tr>
-            <tr>
-                <td>par-lg</td>
-                <td>font-size: 18px; line-height: 28px;</td>
-            </tr>
-            <tr>
-                <td>par-xl</td>
-                <td>font-size: 20px; line-height: 32px;</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-
----
-
-### Breakpoints
-
-- xs: 600px
-- sm: 1024px
-- md: 1440px
-- lg: 1920px
-- xl: 2560px
-
----
-
-### Classes de Paragraph com breakpoint
-
-<div class="h-400 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>
-            {['xs', 'sm', 'md', 'lg', 'xl'].map((breakpoint) => (
-                <>
-                    <tr key={`par-xs-${breakpoint}`}>
-                        <td>{`par-xs-${breakpoint}`}</td>
-                        <td>font-size: 12px; line-height: 16px;</td>
-                        <td>{`@media only screen and (min-width: ${breakpoint === 'xs' ? '600px' : breakpoint === 'sm' ? '1024px' : breakpoint === 'md' ? '1440px' : breakpoint === 'lg' ? '1920px' : '2560px'})`}</td>
-                    </tr>
-                    <tr key={`par-sm-${breakpoint}`}>
-                        <td>{`par-sm-${breakpoint}`}</td>
-                        <td>font-size: 14px; line-height: 20px;</td>
-                        <td>{`@media only screen and (min-width: ${breakpoint === 'xs' ? '600px' : breakpoint === 'sm' ? '1024px' : breakpoint === 'md' ? '1440px' : breakpoint === 'lg' ? '1920px' : '2560px'})`}</td>
-                    </tr>
-                    <tr key={`par-md-${breakpoint}`}>
-                        <td>{`par-md-${breakpoint}`}</td>
-                        <td>font-size: 16px; line-height: 24px;</td>
-                        <td>{`@media only screen and (min-width: ${breakpoint === 'xs' ? '600px' : breakpoint === 'sm' ? '1024px' : breakpoint === 'md' ? '1440px' : breakpoint === 'lg' ? '1920px' : '2560px'})`}</td>
-                    </tr>
-                    <tr key={`par-lg-${breakpoint}`}>
-                        <td>{`par-lg-${breakpoint}`}</td>
-                        <td>font-size: 18px; line-height: 28px;</td>
-                        <td>{`@media only screen and (min-width: ${breakpoint === 'xs' ? '600px' : breakpoint === 'sm' ? '1024px' : breakpoint === 'md' ? '1440px' : breakpoint === 'lg' ? '1920px' : '2560px'})`}</td>
-                    </tr>
-                    <tr key={`par-xl-${breakpoint}`}>
-                        <td>{`par-xl-${breakpoint}`}</td>
-                        <td>font-size: 20px; line-height: 32px;</td>
-                        <td>{`@media only screen and (min-width: ${breakpoint === 'xs' ? '600px' : breakpoint === 'sm' ? '1024px' : breakpoint === 'md' ? '1440px' : breakpoint === 'lg' ? '1920px' : '2560px'})`}</td>
-                    </tr>
-                </>
-            ))}
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-
-Para utilizar as classes de _Paragraph_, você pode fazer de duas formas:
-
-Primeira opção, você pode importar o pacote matcha-core no seu projeto.
-
-1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
-
-`npm install matcha-core`
-
-2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação via estilo global:</span>
-    <div class="flex-column">
-        ```css
-        @import 'node_modules/matcha-core/matcha-core.min.css';
-        ```
-    </div>
-
-    <span class="h6">Importação via angular.json:</span>
-    <div class="flex-column">
-        ```js
-        "styles": [
-            "node_modules/matcha-core/matcha-core.min.css"
-        ]
-        ```
-    </div>
-</div>
-
-Segunda opção, você pode importar o pacote diretamente no seu HTML.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação na tag header do HTML</span>
-    <div class="flex-column">
-        ```html
-        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
-        ```
-    </div>
-</div>

package/src/documentation/foundation/typography/text-align.mdx

@@ -1,22 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundation / Typography / Text-align" />
-
-### Text-align
-
-O text-align controla o alinhamento horizontal do texto dentro de um elemento.
-
-    <div class="matcha-card background-surface flex-column gap-16">
-        <div class="matcha-card background-bg">
-            <p class="text-center">text-center</p>
-            <p class="text-right">text-right</p>
-            <p class="text-left">text-left</p>
-        </div>
-        <div>
-            ```html
-            <p class="text-center">text-align: center</p>
-            <p class="text-right">text-align: right</p>
-            <p class="text-left">text-align: left</p>
-            ```
-        </div>
-    </div>

package/src/documentation/foundation/typography/text-styles.mdx

@@ -1,88 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundation / Typography / Text Styles" />
-
-### Text styles
-
-Estilização de trechos específicos de um texto.
-
-    <div class="matcha-card background-surface flex-column gap-16">
-        <div class="matcha-card background-bg">
-            <p>Exemplo de um <span class="text-super">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-sub">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-capitalize">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-uppercase">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-lowercase">TEXTO</span> estilizado</p>
-        </div>
-        <div>
-            ```html
-            <p>Exemplo de um <span class="text-super">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-sub">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-capitalize">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-uppercase">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-lowercase">TEXTO</span> estilizado</p>
-            ```
-        </div>
-    </div>
-
-<div class="h-24"></div>
-
-### Para quebra de palavras
-
-<div class="h-24"></div>
-
-<div class="matcha-card background-surface flex-column gap-16">
-  <div class="matcha-card background-bg gap-16">
-    <p class="word-break w-124 background-surface radius-6">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-    <p class="word-break-all w-124 background-surface radius-6">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-  </div>
-  <div>
-    ```html
-    <p class="word-break w-124">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-    <p class="word-break-all w-124">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-    ```
-  </div>
-</div>
-
-<div class="h-24"></div>
-
-### Outras estilizações
-
-<div class="h-24"></div>
-
-<div class="matcha-card background-surface flex-column gap-16">
-  <div class="matcha-card background-bg">
-    <p class="text-truncate w-64">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-nowrap background-surface-alpha-inverse radius-6 w-64">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-boxed">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-strike">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-none">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-  </div>
-  <div>
-    ```html
-    <p class="text-truncate w-64"></p>
-    <p class="text-nowrap background-surface w-64"></p>
-    <p class="text-boxed"></p>
-    <p class="text-strike"></p>
-    <p class="text-none"></p>
-    ```
-  </div>
-</div>