matcha-components 20.15.0 → 20.16.0

package/src/documentation/foundation/sizes/height/heights.mdx

@@ -1,96 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-export const title = "Height";
-
-<Meta title="Foundation / Sizes / Height / Height" />
-
-# {title}
-
-Os tamanhos para as classes de height são sempre múltiplos de **4**, sendo o mínimo **0** e o máximo **256**.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.h-#{$height-value}#{$infix}#{$has-important}` => `.h-md-16--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent h-16 flex-center-center w-124 text-center font-size-14">h-16</div>
-        <div class="accent h-32 flex-center-center w-124 text-center font-size-14">h-32</div>
-        <div class="accent h-64 flex-center-center w-124 text-center font-size-14">h-64</div>
-        <div class="accent h-128 flex-center-center w-124 text-center font-size-14">h-128</div>
-        <div class="accent h-256 flex-center-center w-124 text-center font-size-14">h-256</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="h-16">height: 16px</div>
-        <div class="h-32">height: 32px</div>
-        <div class="h-64">height: 64px</div>
-        <div class="h-128">height: 128px</div>
-        <div class="h-256">height: 256px</div>
-        ```
-    </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: 65 }, (_, index) => {
-                const heightValue = index * 4;
-                return (
-                    <tr key={`h-${heightValue}`}>
-                        <td>{`h-${heightValue}`}</td>
-                        <td>{`height: ${heightValue}px;`}</td>
-                    </tr>
-                );
-            })}
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de {title}, 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/sizes/height/max-heights.mdx

@@ -1,96 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-export const title = "Max Height";
-
-<Meta title="Foundation / Sizes / Height / Max-height" />
-
-# {title}
-
-Os tamanhos para as classes de max-height são sempre múltiplos de **4**, sendo o mínimo **0** e o máximo **256**.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.max-h-#{$height-value}#{$infix}#{$has-important}` => `.max-h-md-16--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent max-h-16 h-300 flex-center-center w-124 text-center font-size-14">max-h-16</div>
-        <div class="accent max-h-32 h-300 flex-center-center w-124 text-center font-size-14">max-h-32</div>
-        <div class="accent max-h-64 h-300 flex-center-center w-124 text-center font-size-14">max-h-64</div>
-        <div class="accent max-h-128 h-300 flex-center-center w-124 text-center font-size-14">max-h-128</div>
-        <div class="accent max-h-256 h-300 flex-center-center w-124 text-center font-size-14">max-h-256</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="max-h-16 h-300">max-height: 16px</div>
-        <div class="max-h-32 h-300">max-height: 32px</div>
-        <div class="max-h-64 h-300">max-height: 64px</div>
-        <div class="max-h-128 h-300">max-height: 128px</div>
-        <div class="max-h-256 h-300">max-height: 256px</div>
-        ```
-    </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: 65 }, (_, index) => {
-                const maxHeightValue = index * 4;
-                return (
-                    <tr key={`max-h-${maxHeightValue}`}>
-                        <td>{`max-h-${maxHeightValue}`}</td>
-                        <td>{`max-height: ${maxHeightValue}px;`}</td>
-                    </tr>
-                );
-            })}
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de {title}, 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/sizes/height/min-heights.mdx

@@ -1,96 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-export const title = "Min Height";
-
-<Meta title="Foundation / Sizes / Height / Min-height" />
-
-# {title}
-
-Os tamanhos para as classes de min-height são sempre múltiplos de **4**, sendo o mínimo **0** e o máximo **256**.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.min-h-#{$height-value}#{$infix}#{$has-important}` => `.min-h-md-16--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent min-h-16 h-0 flex-center-center w-124 text-center font-size-14">min-h-16</div>
-        <div class="accent min-h-32 h-0 flex-center-center w-124 text-center font-size-14">min-h-32</div>
-        <div class="accent min-h-64 h-0 flex-center-center w-124 text-center font-size-14">min-h-64</div>
-        <div class="accent min-h-128 h-0 flex-center-center w-124 text-center font-size-14">min-h-128</div>
-        <div class="accent min-h-256 h-0 flex-center-center w-124 text-center font-size-14">min-h-256</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="min-h-16 h-0">min-height: 16px</div>
-        <div class="min-h-32 h-0">min-height: 32px</div>
-        <div class="min-h-64 h-0">min-height: 64px</div>
-        <div class="min-h-128 h-0">min-height: 128px</div>
-        <div class="min-h-256 h-0">min-height: 256px</div>
-        ```
-    </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: 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>
-
-### Instalação
-Para utilizar as classes de {title}, 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/sizes/width/max-width.mdx

@@ -1,95 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundation / Sizes / Width / Max-width" />
-
-# Max Width
-
-Os tamanhos para as classes de max-width são sempre múltiplos de **4**, sendo o mínimo **0** e o máximo **256**.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.max-w-#{$width-value}#{$infix}#{$has-important}` => `.max-w-md-16--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent max-w-16 w-300 flex-center-center h-124 text-center font-size-14">max-w-16</div>
-        <div class="accent max-w-32 w-300 flex-center-center h-124 text-center font-size-14">max-w-32</div>
-        <div class="accent max-w-64 w-300 flex-center-center h-124 text-center font-size-14">max-w-64</div>
-        <div class="accent max-w-128 w-300 flex-center-center h-124 text-center font-size-14">max-w-128</div>
-        <div class="accent max-w-256 w-300 flex-center-center h-124 text-center font-size-14">max-w-256</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="max-w-16 w-300">max-width: 16px</div>
-        <div class="max-w-32 w-300">max-width: 32px</div>
-        <div class="max-w-64 w-300">max-width: 64px</div>
-        <div class="max-w-128 w-300">max-width: 128px</div>
-        <div class="max-w-256 w-300">max-width: 256px</div>
-        ```
-    </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: 65 }, (_, index) => {
-                const maxWidthValue = index * 4;
-                return (
-                    <tr key={`max-w-${maxWidthValue}`}>
-                        <td>{`max-w-${maxWidthValue}`}</td>
-                        <td>{`max-width: ${maxWidthValue}px;`}</td>
-                    </tr>
-                );
-            })}
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de _Max Width_, 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/sizes/width/min-width.mdx

@@ -1,96 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-export const title = "Min Width";
-
-<Meta title="Foundation / Sizes / Width / Min-width" />
-
-# {title}
-
-Os tamanhos para as classes de min-width são sempre múltiplos de **4**, sendo o mínimo **0** e o máximo **256**.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.min-w-#{$width-value}#{$infix}#{$has-important}` => `.min-w-md-16--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent min-w-16 w-0 flex-center-center h-124 text-center font-size-14">min-w-16</div>
-        <div class="accent min-w-32 w-0 flex-center-center h-124 text-center font-size-14">min-w-32</div>
-        <div class="accent min-w-64 w-0 flex-center-center h-124 text-center font-size-14">min-w-64</div>
-        <div class="accent min-w-128 w-0 flex-center-center h-124 text-center font-size-14">min-w-128</div>
-        <div class="accent min-w-256 w-0 flex-center-center h-124 text-center font-size-14">min-w-256</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="min-w-16 w-0">min-width: 16px</div>
-        <div class="min-w-32 w-0">min-width: 32px</div>
-        <div class="min-w-64 w-0">min-width: 64px</div>
-        <div class="min-w-128 w-0">min-width: 128px</div>
-        <div class="min-w-256 w-0">min-width: 256px</div>
-        ```
-    </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: 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>
-
-### Instalação
-Para utilizar as classes de {title}, 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/sizes/width/widths.mdx

@@ -1,96 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-export const title = "Width";
-
-<Meta title="Foundation / Sizes / Width / Width" />
-
-# Width
-
-Os tamanhos para as classes de width são sempre múltiplos de **4**, sendo o mínimo **0** e o máximo **256**.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.w-#{$width-value}#{$infix}#{$has-important}` => `.w-md-16--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent w-16 flex-center-center h-124 text-center font-size-14">w-16</div>
-        <div class="accent w-32 flex-center-center h-124 text-center font-size-14">w-32</div>
-        <div class="accent w-64 flex-center-center h-124 text-center font-size-14">w-64</div>
-        <div class="accent w-128 flex-center-center h-124 text-center font-size-14">w-128</div>
-        <div class="accent w-256 flex-center-center h-124 text-center font-size-14">w-256</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="w-16">width: 16px</div>
-        <div class="w-32">width: 32px</div>
-        <div class="w-64">width: 64px</div>
-        <div class="w-128">width: 128px</div>
-        <div class="w-256">width: 256px</div>
-        ```
-    </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: 65 }, (_, index) => {
-                const widthValue = index * 4;
-                return (
-                    <tr key={`w-${widthValue}`}>
-                        <td>{`w-${widthValue}`}</td>
-                        <td>{`width: ${widthValue}px;`}</td>
-                    </tr>
-                );
-            })}
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de _Width_, 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>