npm - fokus-styles - Versions diffs - 2.0.0 - Mend

fokus-styles 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4328) hide show

package/mockup/examples/datatable.html ADDED Viewed

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - DataTable</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/components.css">
+    <link rel="stylesheet" href="../../dist/css/forms.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            padding: 24px;
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+        section {
+            max-width: 560px;
+            margin-bottom: 24px;
+        }
+        .demo-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+    <div class="theme-panel">
+<section>
+            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">DataTable — ordene por coluna, filtre e pagine (5 linhas/página)</p>
+            <div class="fs-datatable" id="datatable-claro" data-fs="datatable" data-fs-page-size="5">
+                <div class="fs-datatable-toolbar">
+                    <input type="search" class="fs-form-control" data-fs-datatable-filter placeholder="Filtrar por nome ou framework…">
+                </div>
+                <table class="fs-table fs-table-striped fs-table-hover">
+                    <thead>
+                        <tr>
+                            <th scope="col" data-fs-sort="name">Nome</th>
+                            <th scope="col" data-fs-sort="framework">Framework</th>
+                            <th scope="col" data-fs-sort="year">Lançamento</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>Ana</td><td>Fokus Styles</td><td>2026</td></tr>
+                        <tr><td>Bruno</td><td>Cirrus UI</td><td>2018</td></tr>
+                        <tr><td>Carla</td><td>UIkit</td><td>2013</td></tr>
+                        <tr><td>Diego</td><td>Bulma</td><td>2016</td></tr>
+                        <tr><td>Elisa</td><td>Foundation</td><td>2011</td></tr>
+                        <tr><td>Fábio</td><td>Materialize</td><td>2014</td></tr>
+                        <tr><td>Giulia</td><td>Pure.css</td><td>2013</td></tr>
+                        <tr><td>Hugo</td><td>Milligram</td><td>2015</td></tr>
+                        <tr><td>Iris</td><td>Spectre.css</td><td>2017</td></tr>
+                        <tr><td>João</td><td>Tachyons</td><td>2014</td></tr>
+                        <tr><td>Karina</td><td>Picnic CSS</td><td>2016</td></tr>
+                        <tr><td>Lucas</td><td>Almost Flat</td><td>2013</td></tr>
+                    </tbody>
+                </table>
+                <div class="fs-empty-state" data-fs-datatable-empty hidden>
+                    <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></div>
+                    <p class="fs-empty-state-title">Nenhum resultado encontrado.</p>
+                </div>
+                <div class="fs-datatable-loading" data-fs-datatable-loading hidden>
+                    <div class="fs-skeleton fs-skeleton-text" style="width: 100%; height: 20px; margin-bottom: 8px;"></div>
+                    <div class="fs-skeleton fs-skeleton-text" style="width: 100%; height: 20px; margin-bottom: 8px;"></div>
+                    <div class="fs-skeleton fs-skeleton-text" style="width: 100%; height: 20px;"></div>
+                </div>
+                <div class="fs-empty-state" data-fs-datatable-error hidden>
+                    <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></div>
+                    <p class="fs-empty-state-title">Falha ao carregar dados</p>
+                    <p class="fs-empty-state-text" data-fs-datatable-error-message></p>
+                </div>
+            </div>
+            <div class="demo-actions">
+                <button type="button" class="fs-btn fs-btn-sm" data-demo-action="loading" data-demo-target="datatable-claro">Simular carregando</button>
+                <button type="button" class="fs-btn fs-btn-sm" data-demo-action="error" data-demo-target="datatable-claro">Simular erro</button>
+                <button type="button" class="fs-btn fs-btn-sm" data-demo-action="reset" data-demo-target="datatable-claro">Normal</button>
+            </div>
+        </section>
+    </div>
+    <!-- SCRIPTS IMPORT -->
+    <script src="../../dist/js/fokus.js"></script>
+    <script>
+        // Só pro mockup: os botões abaixo demonstram setLoading()/setError(),
+        // que na vida real seriam chamados ao redor de uma requisição real.
+        document.querySelectorAll("[data-demo-action]").forEach((btn) => {
+            btn.addEventListener("click", () => {
+                const instance = FokusStyles.DataTable.getInstance(document.getElementById(btn.dataset.demoTarget));
+                if (btn.dataset.demoAction === "loading") instance.setLoading(true);
+                else if (btn.dataset.demoAction === "error") instance.setError("Não foi possível conectar ao servidor.");
+                else {
+                    instance.setLoading(false);
+                    instance.setError(null);
+                }
+            });
+        });
+    </script>
+</body>
+</html>

package/mockup/examples/datepicker.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - Datepicker &amp; Timepicker</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/components.css">
+    <link rel="stylesheet" href="../../dist/css/forms.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            padding: 24px;
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+        section {
+            max-width: 320px;
+            margin-bottom: 24px;
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+    <div class="theme-panel">
+<section>
+            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Datepicker — calendário customizado (JS)</p>
+            <label for="datepicker-claro" class="fs-form-label">Data de entrega</label>
+            <div class="fs-datepicker">
+                <input type="text" class="fs-form-control" id="datepicker-claro" data-fs="datepicker" data-fs-target="#datepicker-claro-panel" placeholder="dd/mm/aaaa" value="15/07/2026">
+            </div>
+            <div id="datepicker-claro-panel"></div>
+        </section>
+        <section>
+            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Date nativo — <code>&lt;input type="date"&gt;</code> estilizado (CSS-only)</p>
+            <label for="native-date-claro" class="fs-form-label">Data de nascimento</label>
+            <input type="date" class="fs-form-control" id="native-date-claro">
+        </section>
+        <section>
+            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Time nativo — <code>&lt;input type="time"&gt;</code> estilizado (CSS-only)</p>
+            <label for="native-time-claro" class="fs-form-label">Horário preferido</label>
+            <input type="time" class="fs-form-control" id="native-time-claro">
+        </section>
+    </div>
+    <!-- SCRIPTS IMPORT -->
+    <script src="../../dist/js/fokus.js"></script>
+</body>
+</html>

package/mockup/examples/divider.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - Divider</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/components.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            padding: 24px;
+            background-color: var(--fs-color-subtle);
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+        .theme-panel {
+            max-width: 360px;
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+<div class="theme-panel">
+        <p class="fs-u-mb-0">Texto acima do divisor simples.</p>
+        <hr class="fs-divider">
+        <p class="fs-u-mb-0">Texto abaixo.</p>
+        <div class="fs-divider"><span class="fs-divider-label">ou</span></div>
+        <p class="fs-u-mb-0">Continue com e-mail e senha.</p>
+        <div class="fs-divider"><span class="fs-divider-label">Seção 3</span></div>
+    </div>
+</body>
+</html>

package/mockup/examples/dropdown-tooltip.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - Dropdown &amp; Tooltip</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/components.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            padding: 24px;
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+        section {
+            margin-bottom: 24px;
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+    <div class="theme-panel">
+<section>
+            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Dropdown — auto-init via data-fs, posicionamento, foco e teclado (setas, Escape, clique fora)</p>
+            <p class="fs-u-fs-xs fs-u-mb-2">Alinhamento padrão (<code class="fs-u-font-mono">data-align="start"</code>, borda esquerda do menu = borda esquerda do botão):</p>
+            <div class="fs-dropdown fs-u-mr-4">
+                <button type="button" class="fs-btn fs-btn-primary fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#menu-claro">
+                    Opções
+                </button>
+                <div class="fs-dropdown-menu" id="menu-claro">
+                    <span class="fs-dropdown-header">Conta</span>
+                    <a href="#" class="fs-dropdown-item">Perfil</a>
+                    <a href="#" class="fs-dropdown-item">Configurações</a>
+                    <div class="fs-dropdown-divider"></div>
+                    <a href="#" class="fs-dropdown-item is-disabled">Item desabilitado</a>
+                    <button type="button" class="fs-dropdown-item">Sair</button>
+                </div>
+            </div>
+            <p class="fs-u-fs-xs fs-u-mb-2 fs-u-mt-3"><code class="fs-u-font-mono">data-align="end"</code> (borda direita do menu = borda direita do botão):</p>
+            <div class="fs-dropdown" style="margin-left: 300px;">
+                <button type="button" class="fs-btn fs-btn-primary fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#menu-claro-end" data-align="end">
+                    Opções (end)
+                </button>
+                <div class="fs-dropdown-menu" id="menu-claro-end">
+                    <a href="#" class="fs-dropdown-item">Perfil</a>
+                    <a href="#" class="fs-dropdown-item">Configurações</a>
+                    <button type="button" class="fs-dropdown-item">Sair</button>
+                </div>
+            </div>
+        </section>
+        <section>
+            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Tooltip — auto-init via data-fs, show/hide por hover/foco, 4 posicionamentos</p>
+            <button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" data-placement="top" title="Tooltip no topo">Top</button>
+            <button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" data-placement="bottom" title="Tooltip embaixo">Bottom</button>
+            <button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" data-placement="left" title="Tooltip à esquerda">Left</button>
+            <button type="button" class="fs-btn" data-fs="tooltip" data-placement="right" title="Tooltip à direita">Right</button>
+        </section>
+    </div>
+    <!-- SCRIPTS IMPORT -->
+    <script src="../../dist/js/fokus.js"></script>
+</body>
+</html>

package/mockup/examples/empty-state.html ADDED Viewed

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - Empty State</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/components.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            display: flex;
+            gap: 24px;
+            padding: 24px;
+            background-color: var(--fs-color-subtle);
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+        .card-like {
+            width: 320px;
+            background-color: var(--fs-color-surface);
+            border-radius: var(--fs-radius-md);
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+<div class="theme-panel">
+        <div class="card-like">
+            <div class="fs-empty-state">
+                <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></div>
+                <h3 class="fs-empty-state-title">Nenhum resultado encontrado</h3>
+                <p class="fs-empty-state-text">Tente ajustar os filtros ou buscar por outro termo.</p>
+                <button type="button" class="fs-btn fs-btn-primary">Limpar filtros</button>
+            </div>
+        </div>
+        <div class="card-like">
+            <div class="fs-empty-state">
+                <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg></div>
+                <h3 class="fs-empty-state-title">Caixa de entrada vazia</h3>
+                <p class="fs-empty-state-text">Novas mensagens aparecerão aqui.</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

package/mockup/examples/file-drop.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - File Input Drag-and-Drop</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/forms.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            padding: 24px;
+            background-color: var(--fs-color-subtle);
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+        .theme-panel > div {
+            max-width: 360px;
+        }
+        #resultado {
+            font-size: 0.85rem;
+            color: var(--fs-color-muted);
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+<div class="theme-panel">
+        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Arraste um arquivo para a área abaixo (ou clique)</p>
+        <div class="fs-file-upload">
+            <input type="file" class="fs-file-input" id="arquivo-1">
+            <label for="arquivo-1" class="fs-file-label fs-file-label-dropzone" data-fs="file-drop">
+                <span>Arraste um arquivo aqui</span>
+                <span class="fs-file-dropzone-hint">ou clique para escolher</span>
+            </label>
+        </div>
+        <p id="resultado">Nenhum arquivo selecionado.</p>
+        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Botão padrão (mesma funcionalidade, sem o visual de dropzone)</p>
+        <div class="fs-file-upload">
+            <input type="file" class="fs-file-input" id="arquivo-2">
+            <label for="arquivo-2" class="fs-file-label" data-fs="file-drop">Escolher arquivo</label>
+        </div>
+        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Desabilitado</p>
+        <div class="fs-file-upload">
+            <input type="file" class="fs-file-input" id="arquivo-3" disabled>
+            <label for="arquivo-3" class="fs-file-label fs-file-label-dropzone" data-fs="file-drop">
+                <span>Desabilitado</span>
+            </label>
+        </div>
+    </div>
+    <script src="../../dist/js/fokus.js"></script>
+    <script>
+        document.getElementById("arquivo-1").addEventListener("change", (event) => {
+            const file = event.target.files[0];
+            document.getElementById("resultado").textContent = file ? `Selecionado: ${file.name}` : "Nenhum arquivo selecionado.";
+        });
+    </script>
+</body>
+</html>

package/mockup/examples/file-upload-advanced.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - Upload avançado</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/forms.css">
+    <link rel="stylesheet" href="../../dist/css/components.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            padding: 24px;
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+        .upload-demo {
+            max-width: 360px;
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+    <div class="theme-panel">
+<div class="fs-file-upload upload-demo" data-fs="file-upload-advanced" id="upload-claro">
+            <input type="file" class="fs-file-input" id="anexos-claro" multiple>
+            <label for="anexos-claro" class="fs-file-label fs-file-label-dropzone" data-fs="file-drop">
+                Arraste arquivos ou clique para escolher
+                <span class="fs-file-dropzone-hint">Vários arquivos, até 5MB cada</span>
+            </label>
+        </div>
+        <button type="button" class="fs-btn fs-u-mt-2" data-simulate="upload-claro">Simular progresso do 1º arquivo</button>
+    </div>
+    <script src="../../dist/js/fokus.js"></script>
+    <script>
+        // Demonstra a API `setProgress`/`setError` sem depender de um backend
+        // real — um `setInterval` simula um upload progressivo no 1º arquivo
+        // selecionado, só pra exercitar a barra de progresso do mockup.
+        document.querySelectorAll("[data-simulate]").forEach((button) => {
+            button.addEventListener("click", () => {
+                const rootEl = document.getElementById(button.getAttribute("data-simulate"));
+                const upload = FokusStyles.FileUploadAdvanced.getInstance(rootEl);
+                const firstItem = rootEl.querySelector(".fs-file-upload-item");
+                if (!firstItem) return;
+                const id = firstItem.getAttribute("data-file-id");
+                let progress = 0;
+                const interval = setInterval(() => {
+                    progress += 20;
+                    upload.setProgress(id, progress);
+                    if (progress >= 100) clearInterval(interval);
+                }, 200);
+            });
+        });
+    </script>
+</body>
+</html>

package/mockup/examples/forms-advanced.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mockup - Formulários Avançados</title>
+    <!-- STYLES IMPORT -->
+    <link rel="stylesheet" href="../../dist/css/fonts.css">
+    <link rel="stylesheet" href="../../dist/css/forms.css">
+    <link rel="stylesheet" href="../../dist/css/helpers.css">
+    <style>
+        .theme-panel {
+            padding: 24px;
+        }
+        html[data-theme="dark"] .theme-panel {
+            color: var(--fs-color-text);
+            background-color: var(--fs-color-surface);
+        }
+    </style>
+    <link rel="stylesheet" href="../assets/example-theme.css">
+    <script src="../assets/example-theme.js"></script>
+</head>
+<body>
+    <div class="theme-panel">
+<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Validação - .is-valid / .is-invalid</p>
+        <div class="fs-form-row fs-u-gap-x-2">
+            <div class="fs-form-col">
+                <label for="input-valid" class="fs-form-label fs-form-size-md">E-mail</label>
+                <input type="email" class="fs-form-control fs-form-size-xxl is-valid" id="input-valid" value="jorge@fokus.dev">
+                <span class="fs-valid-feedback fs-form-size-xxl">E-mail válido.</span>
+            </div>
+            <div class="fs-form-col">
+                <label for="input-invalid" class="fs-form-label fs-form-size-md">E-mail</label>
+                <input type="email" class="fs-form-control fs-form-size-xxl is-invalid" id="input-invalid" value="jorge@fokus">
+                <span class="fs-invalid-feedback fs-form-size-xxl">Informe um e-mail válido.</span>
+            </div>
+        </div>
+        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Upload de arquivo estilizado</p>
+        <div class="fs-form-row fs-u-gap-x-2">
+            <div class="fs-form-col">
+                <span class="fs-form-label fs-form-size-md">Padrão</span>
+                <div class="fs-file-upload">
+                    <input type="file" class="fs-file-input" id="file-default">
+                    <label for="file-default" class="fs-file-label">Escolher arquivo</label>
+                </div>
+            </div>
+            <div class="fs-form-col">
+                <span class="fs-form-label fs-form-size-md">Tamanhos</span>
+                <div class="fs-form-row fs-u-gap-x-2">
+                    <div class="fs-file-upload">
+                        <input type="file" class="fs-file-input" id="file-sm">
+                        <label for="file-sm" class="fs-file-label fs-file-label-sm">Small</label>
+                    </div>
+                    <div class="fs-file-upload">
+                        <input type="file" class="fs-file-input" id="file-lg">
+                        <label for="file-lg" class="fs-file-label fs-file-label-lg">Large</label>
+                    </div>
+                </div>
+            </div>
+            <div class="fs-form-col">
+                <span class="fs-form-label fs-form-size-md">Desabilitado</span>
+                <div class="fs-file-upload">
+                    <input type="file" class="fs-file-input" id="file-disabled" disabled>
+                    <label for="file-disabled" class="fs-file-label">Escolher arquivo</label>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>