negodesign 0.0.11 → 0.0.12

package/dist/components/pages/privacy-policy-or-terms-of-use/02/PageHero.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  /**
+   * Documentation page hero with colored banner and optional action.
+   * Displays title, last update date, and a search button in the top-right corner.
+   * @component
+   * @example
+   * ```svelte
+   * <PageHero title="Privacy Policy" lastUpdated="24 June 2024" accent="#f0400f">
+   *   {#snippet action()}
+   *     <button>Search</button>
+   *   {/snippet}
+   * </PageHero>
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    title,
+    lastUpdated,
+    accent = "#f0400f",
+    action,
+  }: {
+    /** Page title. */
+    title: string;
+    /** Last update date of the document. */
+    lastUpdated: string;
+    /** Banner background color. */
+    accent?: string;
+    /** Optional action in the top-right corner (e.g., search button). */
+    action?: Snippet;
+  } = $props();
+</script>
+
+<header
+  class="relative px-6 py-10 sm:px-10 sm:py-14 text-white"
+  style="background-color: {accent}"
+>
+  <div class="mx-auto max-w-3xl">
+    <h1 class="text-3xl sm:text-4xl font-bold tracking-tight">{title}</h1>
+    <p class="mt-2 text-sm text-white/80">Latest update: {lastUpdated}</p>
+  </div>
+
+  {#if action}
+    <div class="absolute right-4 top-4 sm:right-6 sm:top-6">
+      {@render action()}
+    </div>
+  {/if}
+</header>

package/dist/components/pages/privacy-policy-or-terms-of-use/02/PageHero.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Page title. */
+    title: string;
+    /** Last update date of the document. */
+    lastUpdated: string;
+    /** Banner background color. */
+    accent?: string;
+    /** Optional action in the top-right corner (e.g., search button). */
+    action?: Snippet;
+};
+declare const PageHero: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHero = ReturnType<typeof PageHero>;
+export default PageHero;

package/dist/components/pages/privacy-policy-or-terms-of-use/02/PrivacyPolicyOrTermsOfUse02.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  /**
+   * Variant 02 of the Privacy Policy / Terms of Use page.
+   * Simple layout with colored hero and centered content in a single column.
+   * @component
+   * @example
+   * ```svelte
+   * <PrivacyPolicyOrTermsOfUse02 data={pageData} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { DocPageData } from "../types";
+  import DocsPageHero from "./DocsPageHero.svelte";
+
+  let { data }: { data: DocPageData } = $props();
+</script>
+
+<svelte:head>
+  <title>{data.title}</title>
+</svelte:head>
+
+<DocsPageHero data={data} />

package/dist/components/pages/privacy-policy-or-terms-of-use/02/PrivacyPolicyOrTermsOfUse02.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DocPageData } from "../types";
+type $$ComponentProps = {
+    data: DocPageData;
+};
+declare const PrivacyPolicyOrTermsOfUse02: import("svelte").Component<$$ComponentProps, {}, "">;
+type PrivacyPolicyOrTermsOfUse02 = ReturnType<typeof PrivacyPolicyOrTermsOfUse02>;
+export default PrivacyPolicyOrTermsOfUse02;

package/dist/components/pages/privacy-policy-or-terms-of-use/PrivacyPolicyOrTermsOfUse.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  /**
+   * Main Privacy Policy / Terms of Use component.
+   * Allows choosing between two layout variants:
+   * - **1**: Three-column layout with sidebar, content, and TOC (scroll-spy).
+   * - **2**: Simple layout with colored hero and centered content.
+   *
+   * @component
+   * @example
+   * ```svelte
+    * <!-- Variant 1 (default) — docs layout with sidebar -->
+   * <PrivacyPolicyOrTermsOfUse variant={1} data={pageData} />
+   *
+    * <!-- Variant 2 — layout with hero -->
+   * <PrivacyPolicyOrTermsOfUse variant={2} data={pageData} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { PrivacyPolicyOrTermsOfUseProps } from "./types";
+  import PrivacyPolicyOrTermsOfUse01 from "./01/PrivacyPolicyOrTermsOfUse01.svelte";
+  import PrivacyPolicyOrTermsOfUse02 from "./02/PrivacyPolicyOrTermsOfUse02.svelte";
+
+  let { variant = 1, data }: PrivacyPolicyOrTermsOfUseProps = $props();
+</script>
+
+{#if variant === 2}
+  <PrivacyPolicyOrTermsOfUse02 {data} />
+{:else}
+  <PrivacyPolicyOrTermsOfUse01 {data} />
+{/if}

package/dist/components/pages/privacy-policy-or-terms-of-use/PrivacyPolicyOrTermsOfUse.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PrivacyPolicyOrTermsOfUseProps } from "./types";
+declare const PrivacyPolicyOrTermsOfUse: import("svelte").Component<PrivacyPolicyOrTermsOfUseProps, {}, "">;
+type PrivacyPolicyOrTermsOfUse = ReturnType<typeof PrivacyPolicyOrTermsOfUse>;
+export default PrivacyPolicyOrTermsOfUse;

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/ContentBlockView.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  /**
+   * Renders a content block (paragraph or list).
+   * @component
+   * @example
+   * ```svelte
+   * <ContentBlockView block={{ type: "paragraph", text: "Hello world" }} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { ContentBlock } from "../types";
+
+  let { block }: { block: ContentBlock } = $props();
+</script>
+
+{#if block.type === "paragraph"}
+  <p class="leading-7 text-foreground/90">{block.text}</p>
+{:else if block.type === "list"}
+  <ul class="list-disc pl-6 flex flex-col gap-1.5 text-foreground/90">
+    {#each block.items as item, i (i)}
+      <li class="leading-7">{item}</li>
+    {/each}
+  </ul>
+{/if}

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/ContentBlockView.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ContentBlock } from "../types";
+type $$ComponentProps = {
+    block: ContentBlock;
+};
+declare const ContentBlockView: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContentBlockView = ReturnType<typeof ContentBlockView>;
+export default ContentBlockView;

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/DocSectionView.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  /**
+   * Renders a document section with title, content blocks, and recursive subsections.
+   * @component
+   * @example
+   * ```svelte
+   * <DocSectionView section={sectionData} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { DocSection } from "../types";
+  import ContentBlockView from "./ContentBlockView.svelte";
+
+  let { section }: { section: DocSection } = $props();
+
+  const level = $derived(section.level ?? 1);
+  const heading = $derived(
+    section.number
+      ? `${section.number}. ${section.title}`
+      : section.title,
+  );
+</script>
+
+<section id={section.id} class="scroll-mt-24 flex flex-col gap-4">
+  {#if level === 1}
+    <h2 class="text-2xl font-semibold tracking-tight">{heading}</h2>
+  {:else}
+    <h3 class="text-xl font-semibold tracking-tight">{heading}</h3>
+  {/if}
+
+  {#each section.blocks ?? [] as block, i (i)}
+    <ContentBlockView {block} />
+  {/each}
+
+  {#if section.subsections}
+    <div class="flex flex-col gap-6 mt-2">
+      {#each section.subsections as subsection (subsection.id)}
+        <svelte:self section={subsection} />
+      {/each}
+    </div>
+  {/if}
+</section>

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/DocSectionView.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DocSection } from "../types";
+type $$ComponentProps = {
+    section: DocSection;
+};
+declare const DocSectionView: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocSectionView = ReturnType<typeof DocSectionView>;
+export default DocSectionView;

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/PrivacyPolicyOrTermsOfUseBreadcrumb.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+  /**
+   * Renders the breadcrumb navigation (e.g., Blog / Current).
+   * @component
+   * @example
+   * ```svelte
+   * <PrivacyPolicyOrTermsOfUseBreadcrumb items={[{ label: "Blog", href: "/blog" }, { label: "Current" }]} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { BreadcrumbItem } from "../types";
+
+  let { items }: { items: BreadcrumbItem[] } = $props();
+</script>
+
+<nav
+  aria-label="Breadcrumb"
+  class="flex items-center gap-1.5 text-sm text-muted-foreground"
+>
+  {#each items as item, i (item.label)}
+    {#if item.href}
+      <a href={item.href} class="hover:text-foreground transition-colors"
+        >{item.label}</a
+      >
+    {:else}
+      <span class="text-foreground font-medium">{item.label}</span>
+    {/if}
+    {#if i < items.length - 1}
+      <span class="select-none">/</span>
+    {/if}
+  {/each}
+</nav>

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/PrivacyPolicyOrTermsOfUseBreadcrumb.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { BreadcrumbItem } from "../types";
+type $$ComponentProps = {
+    items: BreadcrumbItem[];
+};
+declare const PrivacyPolicyOrTermsOfUseBreadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type PrivacyPolicyOrTermsOfUseBreadcrumb = ReturnType<typeof PrivacyPolicyOrTermsOfUseBreadcrumb>;
+export default PrivacyPolicyOrTermsOfUseBreadcrumb;

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/toc.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Constrói a tabela de conteúdos (TOC) a partir das secções do documento.
+ * Achata a árvore de secções (com subsections) numa lista plana.
+ * @param sections - Secções do documento
+ * @returns Lista de itens para a TOC
+ */
+import type { DocSection, TocItem } from "../types";
+export declare function buildToc(sections: DocSection[]): TocItem[];

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/toc.js

@@ -0,0 +1,14 @@
+export function buildToc(sections) {
+    const result = [];
+    for (const section of sections) {
+        result.push({
+            id: section.id,
+            label: section.number ? `${section.number}. ${section.title}` : section.title,
+            level: section.level ?? 1,
+        });
+        if (section.subsections) {
+            result.push(...buildToc(section.subsections));
+        }
+    }
+    return result;
+}

package/dist/components/pages/privacy-policy-or-terms-of-use/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Tipagem partilhada por todos os componentes da página de documentação/política.
+ * @module types
+ */
+/** Um item do breadcrumb no topo da página (ex: Blog / Current). */
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+/**
+ * Um bloco de conteúdo dentro de uma secção: parágrafo de texto
+ * ou lista de pontos (bullets).
+ */
+export type ContentBlock = {
+    type: "paragraph";
+    text: string;
+} | {
+    type: "list";
+    items: string[];
+};
+/**
+ * Uma secção de conteúdo (ex: "1. Introduction", "2.1 Personal Data").
+ * `level` define o tamanho do título (1 = h2, 2 = h3).
+ * `subsections` permite aninhar secções (2 -> 2.1, 2.2, ...).
+ */
+export interface DocSection {
+    /** id único, usado para o link/scroll da sidebar e TOC (#id) */
+    id: string;
+    /** número exibido antes do título, ex: "1", "2.1" */
+    number?: string;
+    /** título da secção */
+    title: string;
+    /** nível do título (1 = h2, 2 = h3). Padrão: 1 */
+    level?: 1 | 2;
+    /** blocos de conteúdo (parágrafos, listas) */
+    blocks?: ContentBlock[];
+    /** subsecções aninhadas */
+    subsections?: DocSection[];
+}
+/** Dados completos de uma página de documentação/política. */
+export interface DocPageData {
+    /** título da página */
+    title: string;
+    /** data da última atualização */
+    lastUpdated: string;
+    /** itens do breadcrumb */
+    breadcrumb: BreadcrumbItem[];
+    /** secções de conteúdo (usadas pela sidebar, TOC e renderização) */
+    sections: DocSection[];
+}
+/** Item derivado automaticamente das secções, para a tabela de conteúdos (TOC). */
+export interface TocItem {
+    id: string;
+    label: string;
+    level: 1 | 2;
+}
+export interface PrivacyPolicyOrTermsOfUseProps {
+    /** Variante do layout: 1 = sidebar+TOC, 2 = hero+coluna. */
+    variant?: 1 | 2;
+    /** Dados completos da página de documento. */
+    data: DocPageData;
+}

package/dist/components/pages/privacy-policy-or-terms-of-use/types.js

@@ -0,0 +1,5 @@
+/**
+ * Tipagem partilhada por todos os componentes da página de documentação/política.
+ * @module types
+ */
+export {};

package/dist/components/pages/{forget-password → security/forget-password}/01/ui/ForgetPasswordCard.svelte

@@ -1,21 +1,26 @@
+<script lang="ts" module>
+  /**
+   * @component ForgetPasswordCard
+   * Password recovery card with tabs, back button, and light switch.
+   *
+   * @example svelte
+   * <ForgetPasswordCard formType="EMAIL" onSubmit={(req) => console.log(req)} />
+   */
+</script>
+
 <script lang="ts">
-  import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
-  import ButtonBack from "../../../../core/button/ButtonBack.svelte";
+  import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
+  import ButtonBack from "../../../../../core/button/ButtonBack.svelte";
   import type { Snippet } from "svelte";
-  import { LightSwitch } from "../../../../ui/light-switch";
-  import { t } from "../../../../../i18n";
+  import { LightSwitch } from "../../../../../ui/light-switch";
+  import { t } from "../../../../../../i18n";
   import type {
     ForgetPasswordRequestDto,
     ForgetPasswordVariant,
   } from "../../types";
   import FormForgetPassword from "./FormForgetPassword.svelte";
-  import TabUnderline from "../../../../core/tabs/ui/tab-underline.svelte";
+  import TabUnderline from "../../../../../core/tabs/ui/tab-underline.svelte";
 
-  /**
-   * Card de recuperação de senha.
-   * @property {ForgetPasswordVariant} formType - Tipo do input (EMAIL, PHONE)
-   * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter
-   */
   type Props = {
     formType?: ForgetPasswordVariant;
     onSubmit?: (request: ForgetPasswordRequestDto) => void;

package/dist/components/pages/{forget-password → security/forget-password}/01/ui/ForgetPasswordCard.svelte.d.ts

@@ -1,10 +1,5 @@
 import type { Snippet } from "svelte";
 import type { ForgetPasswordRequestDto, ForgetPasswordVariant } from "../../types";
-/**
- * Card de recuperação de senha.
- * @property {ForgetPasswordVariant} formType - Tipo do input (EMAIL, PHONE)
- * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter
- */
 type Props = {
     formType?: ForgetPasswordVariant;
     onSubmit?: (request: ForgetPasswordRequestDto) => void;

package/dist/components/pages/{forget-password → security/forget-password}/01/ui/FormForgetPassword.svelte

@@ -1,10 +1,20 @@
+<script lang="ts" module>
+  /**
+   * @component FormForgetPassword
+   * Password recovery form with email, phone, or both input.
+   *
+   * @example svelte
+   * <FormForgetPassword variant="EMAIL" onSubmit={(req) => console.log(req)} />
+   */
+</script>
+
 <script lang="ts">
-  import InputEmail from "../../../../core/form/ui/input-email.svelte";
-  import InputPhone from "../../../../core/form/ui/input-phone.svelte";
-  import InputEmailOrPhone from "../../../../core/form/ui/input-email-or-phone.svelte";
-  import { t } from "../../../../../i18n";
+  import InputEmail from "../../../../../core/form/ui/input-email.svelte";
+  import InputPhone from "../../../../../core/form/ui/input-phone.svelte";
+  import InputEmailOrPhone from "../../../../../core/form/ui/input-email-or-phone.svelte";
+  import { t } from "../../../../../../i18n";
   import type { ForgetPasswordRequestDto, ForgetPasswordVariant } from "../../types";
-  import ButtonSend from "../../../../core/button/ButtonSend.svelte";
+  import ButtonSend from "../../../../../core/button/ButtonSend.svelte";
 
   type Props = {
     variant?: ForgetPasswordVariant;

package/dist/components/pages/{forget-password → security/forget-password}/01/ui/PageForgetPassword01.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import ForgetPasswordCard from "./ForgetPasswordCard.svelte";
-  import LeftHero from "../../../../core/panel/LeftHero.svelte";
+  import LeftHero from "../../../../../core/panel/LeftHero.svelte";
   import type { PageForgetPasswordProps } from "../../types";
-  import { t } from "../../../../../i18n";
+  import { t } from "../../../../../../i18n";
 
   /**
-   * Variante 01 da página de esquecimento de senha.
-   * Layout split: hero à esquerda (reutiliza do login), card de recuperação à direita.
-   * @property {CarouselItem[]} carousel - Itens do carousel (opcional, usa valores padrão)
-   * @property {string} title - Título do hero
+   * Variant 01 of the forgot password page.
+   * Split layout: hero on the left (reused from login), recovery card on the right.
+   * @property {CarouselItem[]} carousel - Carousel items (optional, uses default values)
+   * @property {string} title - Hero title
    */
   let {
     carousel,

package/dist/components/pages/{forget-password → security/forget-password}/PageForgetPassword.svelte

@@ -1,14 +1,17 @@
+<script lang="ts" module>
+  /**
+   * @component PageForgetPassword
+   * Password recovery page. Routes to the specified layout variant.
+   *
+   * @example svelte
+   * <PageForgetPassword varient="01" onSubmit={(req) => handleForget(req)} />
+   */
+</script>
+
 <script lang="ts">
   import type { PageForgetPasswordProps } from "./types";
   import PageForgetPassword01 from "./01/ui/PageForgetPassword01.svelte";
 
-  /**
-   * Página de recuperação de senha.
-   * @property {"01"} varient - Variante do layout
-   * @property {CarouselItem[]} carousel - Itens do carousel hero
-   * @property {string} title - Título do hero
-   * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter email
-   */
   type Props = {
     varient?: "01";
   };

package/dist/components/pages/{forget-password → security/forget-password}/PageForgetPassword.svelte.d.ts

@@ -1,11 +1,4 @@
 import type { PageForgetPasswordProps } from "./types";
-/**
- * Página de recuperação de senha.
- * @property {"01"} varient - Variante do layout
- * @property {CarouselItem[]} carousel - Itens do carousel hero
- * @property {string} title - Título do hero
- * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter email
- */
 type Props = {
     varient?: "01";
 };

package/dist/components/pages/{forget-password → security/forget-password}/types.d.ts

@@ -1,4 +1,4 @@
-import type { CarouselItem, CarouselItemType } from "../../core/carousel/data/CarouselModel";
+import type { LoginCarouselItem, LoginCarouselItemType } from "../login/types";
 import type { Snippet } from "svelte";
 export type ForgetPasswordVariant = "EMAIL" | "PHONE" | "PHONE_EMAIL";
 export type ForgetPasswordRequestDto = {
@@ -6,8 +6,8 @@ export type ForgetPasswordRequestDto = {
     variant: ForgetPasswordVariant;
 };
 export type PageForgetPasswordProps = {
-    carousel?: CarouselItem[];
-    varient?: CarouselItemType;
+    carousel?: LoginCarouselItem[];
+    varient?: LoginCarouselItemType;
     title?: string;
     children?: Snippet;
     formType?: ForgetPasswordVariant;

package/dist/components/pages/{login → security/login}/01/ui/FormLogin.svelte

@@ -1,21 +1,25 @@
+<script lang="ts" module>
+  /**
+   * @component FormLogin
+   * Reusable login form with input variants (EMAIL, USERNAME, PHONE).
+   *
+   * @example svelte
+   * <FormLogin variant="EMAIL" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
 <script lang="ts">
-  import InputEmail from "../../../../core/form/ui/input-email.svelte";
-  import InputUsername from "../../../../core/form/ui/input-username.svelte";
-  import InputPhone from "../../../../core/form/ui/input-phone.svelte";
-  import InputPassword from "../../../../core/form/ui/input-password.svelte";
-  import ButtonLogin from "../../../../core/button/ButtonLogin.svelte";
-  import LinkForgetPassword from "../../../../core/link/link-forget-password.svelte";
-  import LabelOr from "../../../../core/label/LabelOr.svelte";
-  import ButtonLoginWith from "../../../../core/button/ButtonLoginWith.svelte";
-  import { t } from "../../../../../i18n";
+  import InputEmail from "../../../../../core/form/ui/input-email.svelte";
+  import InputUsername from "../../../../../core/form/ui/input-username.svelte";
+  import InputPhone from "../../../../../core/form/ui/input-phone.svelte";
+  import InputPassword from "../../../../../core/form/ui/input-password.svelte";
+  import ButtonLogin from "../../../../../core/button/ButtonLogin.svelte";
+  import LinkForgetPassword from "../../../../../core/link/link-forget-password.svelte";
+  import LabelOr from "../../../../../core/label/LabelOr.svelte";
+  import ButtonLoginWith from "../../../../../core/button/ButtonLoginWith.svelte";
+  import { t } from "../../../../../../i18n";
   import type { LoginRequestDto, LoginVariant, LinkProps } from "../../types";
 
-  /**
-   * Formulário de login reutilizável.
-   * @property {LoginVariant} variant - Tipo do input de dados (EMAIL, USERNAME, PHONE)
-   * @property {(cred: Credential) => void} onSubmit - Callback ao submeter { data, password }
-   * @property {LinkProps} forgetPassword - Config do link de esquecimento de senha { url, onclick }
-   */
   type Props = {
     variant: LoginVariant;
     onSubmit?: (credential: LoginRequestDto) => void;

package/dist/components/pages/{login → security/login}/01/ui/FormLogin.svelte.d.ts

@@ -1,10 +1,4 @@
 import type { LoginRequestDto, LoginVariant, LinkProps } from "../../types";
-/**
- * Formulário de login reutilizável.
- * @property {LoginVariant} variant - Tipo do input de dados (EMAIL, USERNAME, PHONE)
- * @property {(cred: Credential) => void} onSubmit - Callback ao submeter { data, password }
- * @property {LinkProps} forgetPassword - Config do link de esquecimento de senha { url, onclick }
- */
 type Props = {
     variant: LoginVariant;
     onSubmit?: (credential: LoginRequestDto) => void;

package/dist/components/pages/{login → security/login}/01/ui/FormLoginEmailPassword.svelte

@@ -1,8 +1,17 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginEmailPassword
+   * Form de login com email e senha. Wrapper fino de FormLogin variant="EMAIL".
+   *
+   * @example svelte
+   * <FormLoginEmailPassword onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
 <script lang="ts">
   import FormLogin from "./FormLogin.svelte";
   import type { LoginRequestDto, LinkProps } from "../../types";
 
-  /** Form de login com email e senha. Wrapper fino de FormLogin variant="EMAIL". */
   type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;

package/dist/components/pages/{login → security/login}/01/ui/FormLoginEmailPassword.svelte.d.ts

@@ -1,5 +1,4 @@
 import type { LoginRequestDto, LinkProps } from "../../types";
-/** Form de login com email e senha. Wrapper fino de FormLogin variant="EMAIL". */
 type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;

package/dist/components/pages/{login → security/login}/01/ui/FormLoginPhonePassword.svelte

@@ -1,8 +1,17 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginPhonePassword
+   * Form de login com telefone e senha. Wrapper fino de FormLogin variant="PHONE".
+   *
+   * @example svelte
+   * <FormLoginPhonePassword onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
 <script lang="ts">
   import FormLogin from "./FormLogin.svelte";
   import type { LoginRequestDto, LinkProps } from "../../types";
 
-  /** Form de login com telefone e senha. Wrapper fino de FormLogin variant="PHONE". */
   type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;

package/dist/components/pages/{login → security/login}/01/ui/FormLoginPhonePassword.svelte.d.ts

@@ -1,5 +1,4 @@
 import type { LoginRequestDto, LinkProps } from "../../types";
-/** Form de login com telefone e senha. Wrapper fino de FormLogin variant="PHONE". */
 type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;

package/dist/components/pages/{login → security/login}/01/ui/FormLoginUsernamePassword.svelte

@@ -1,8 +1,17 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginUsernamePassword
+   * Form de login com username e senha. Wrapper fino de FormLogin variant="USERNAME".
+   *
+   * @example svelte
+   * <FormLoginUsernamePassword onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
 <script lang="ts">
   import FormLogin from "./FormLogin.svelte";
   import type { LoginRequestDto, LinkProps } from "../../types";
 
-  /** Form de login com username e senha. Wrapper fino de FormLogin variant="USERNAME". */
   type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;