negodesign 0.0.11 → 0.0.12

package/dist/components/core/panel/LeftHero.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { CarouselProps } from "../carousel/data/CarouselModel";
+import type { LoginCarouselProps } from "../../pages/security/login/types";
 import type { Snippet } from "svelte";
 type Props = {
     title?: string | Snippet;
     variant?: "NUMBER" | "DOT";
     autoPlayInterval?: number;
 };
-type $$ComponentProps = Props & CarouselProps;
+type $$ComponentProps = Props & LoginCarouselProps;
 declare const LeftHero: import("svelte").Component<$$ComponentProps, {}, "">;
 type LeftHero = ReturnType<typeof LeftHero>;
 export default LeftHero;

package/dist/components/core/search/01/Search01.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  /**
+   * Search input with full border (variant 1).
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import type { SearchItemProps } from "../types";
+  import SearchInputCore from "../shared/SearchInputCore.svelte";
+
+  let { ...restProps }: SearchItemProps = $props();
+</script>
+
+<SearchInputCore {...restProps} variant={1} />

package/dist/components/core/search/01/Search01.svelte.d.ts

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

package/dist/components/core/search/02/Search02.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  /**
+   * Search input with bottom border only (variant 2).
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import type { SearchItemProps } from "../types";
+  import SearchInputCore from "../shared/SearchInputCore.svelte";
+
+  let { ...restProps }: SearchItemProps = $props();
+</script>
+
+<SearchInputCore {...restProps} variant={2} />

package/dist/components/core/search/02/Search02.svelte.d.ts

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

package/dist/components/core/search/SearchInput.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 Search01 from "./01/Search01.svelte";
+    import Search02 from "./02/Search02.svelte";
+    import type { SearchInputProps } from "./types";
+
+  let { variant = 1, ...restProps }: SearchInputProps = $props();
+</script>
+
+{#if variant === 2}
+  <Search02 {...restProps} />
+{:else}
+  <Search01 {...restProps} />
+{/if}

package/dist/components/core/search/SearchInput.svelte.d.ts

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

package/dist/components/core/search/shared/SearchInputCore.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+  /**
+   * Reusable search input component used by Search01 and Search02.
+   * Renders a text input with a search icon and submit button.
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Search01Icon } from "@hugeicons/core-free-icons";
+  import Button from "../../../ui/button/button.svelte";
+  import { Separator } from "../../../ui/separator/index";
+  import { t } from "../../../../i18n";
+  import type { SearchInputProps } from "../types";
+
+  let { onSubmit, placeholder, variant = 1, buttonClass, inputClass, iconClass }: SearchInputProps = $props();
+
+  let value = $state("");
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") onSubmit?.(value);
+  }
+</script>
+
+<div class="container relative">
+  <div
+    class="mx-auto md:w-11/12 z-10 {variant === 2
+      ? 'border-b'
+      : 'border bg-input rounded-lg shadow'} m-auto"
+  >
+    <div class="flex items-center gap-2 py-1 px-2 w-full md:min-h-15">
+      <div class="items-center gap-2 hidden md:flex">
+        <HugeiconsIcon
+          icon={Search01Icon}
+          size={20}
+          color="currentColor"
+          strokeWidth={1.5}
+          class={iconClass}
+        />
+      </div>
+      <input
+        type="search"
+        bind:value
+        onkeydown={handleKeydown}
+        class="text-sm w-full bg-transparent border-none outline-none focus:outline-none focus:ring-0 focus:border-transparent {inputClass}"
+        placeholder={placeholder || $t("label.search.placeholder")}
+      />
+      <div class="flex gap-1">
+        <Separator class="w-full" orientation="vertical" />
+        <Button
+          onclick={() => onSubmit?.(value)}
+          class={`flex justify-center items-center cursor-pointer ${buttonClass}`}
+        >
+          <HugeiconsIcon
+            icon={Search01Icon}
+            size={15}
+            color="currentColor"
+            strokeWidth={2}
+          />
+          <span class="hidden md:block">{$t("label.search")}</span>
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/core/search/shared/SearchInputCore.svelte.d.ts

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

package/dist/components/core/search/types.d.ts

@@ -0,0 +1,15 @@
+/** Props for the search input component. */
+export interface SearchItemProps {
+    /** Callback fired when the user submits the search. */
+    onSubmit?: (q: string) => void;
+    /** Placeholder text for the input field. */
+    buttonClass?: string;
+    placeholder?: string;
+    inputClass?: string;
+    iconClass?: string;
+}
+/** Extended search input props with a visual variant option. */
+export interface SearchInputProps extends SearchItemProps {
+    /** Visual variant: 1 = full border, 2 = bottom border only. */
+    variant?: 1 | 2;
+}

package/dist/components/core/sidebar/MenuBarSidebar.svelte

@@ -2,30 +2,30 @@
   import * as Sidebar from "../../ui/sidebar/index.js";
   import type { ComponentProps } from "svelte";
 
-  import type { NavUserSidebarItem } from "../nav/data/nav-user-sidebar";
+  import type { NavUserSidebarProps } from "../nav/data/nav-user-sidebar";
   import type {
     NavMenuItem,
-    NavMenuSidebar,
+    NavMenuSidebarProps,
   } from "../nav/data/nav-menu-sidebar";
   import type { Snippet } from "svelte";
+  import NavMenuTopBarSidebar from "../nav/ui/nav-menu-top-bar-sidebar.svelte";
+  import NavMenuBottomSidebar from "../nav/ui/nav-menu-bottom-sidebar.svelte";
+  import NavMenuBarSidebar from "../nav/ui/nav-menu-sidebar.svelte";
   import NavUserSidebar from "../nav/ui/nav-user-sidebar.svelte";
-  import NavMenuBar from "../nav/ui/nav-menu-bar.svelte";
-  import NavMenuBottomBar from "../nav/ui/nav-menu-bottom-bar.svelte";
-  import NavMenuTopBar from "../nav/ui/nav-menu-top-bar.svelte";
   import { t } from "../../../i18n";
 
   /**
-   * Sidebar de navegação com menus, usuário e botões.
-   * @property {NavMenuSidebar[]} menusButtons - Botões do footer (ex: logout)
-   * @property {NavMenuItem[]} menus - Itens de navegação principal
-   * @property {NavUserSidebarItem} user - Dados do usuário logado
+   * Navigation sidebar with menus, user, and buttons.
+   * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
+   * @property {NavMenuItem[]} menus - Main navigation items
+   * @property {NavUserSidebarItem} user - Logged-in user data
    * @property {Snippet} footer - Snippet customizado do footer
    * @property {Snippet} header - Snippet customizado do header
    */
   type Props = {
-    menusButtons?: NavMenuSidebar[];
+    menusButtons?: NavMenuSidebarProps[];
     menus: NavMenuItem[];
-    user: NavUserSidebarItem;
+    user: NavUserSidebarProps;
     footer?: Snippet;
     header?: Snippet;
   };
@@ -47,7 +47,7 @@
     {#if header}
       {@render header?.()}
     {:else}
-      <NavMenuTopBar
+      <NavMenuTopBarSidebar
         content={{
           title: $t("label.panel"),
           subtitle: $t("label.administrative"),
@@ -56,13 +56,13 @@
     {/if}
   </Sidebar.Header>
   <Sidebar.Content>
-    <NavMenuBar items={menus} />
+    <NavMenuBarSidebar items={menus} />
   </Sidebar.Content>
   <Sidebar.Footer>
     {#if footer}
       {@render footer?.()}
     {:else if menusButtons && menusButtons.length > 0}
-      <NavMenuBottomBar items={menusButtons} class="mt-auto" />
+      <NavMenuBottomSidebar items={menusButtons} class="mt-auto" />
     {/if}
     <NavUserSidebar {user} />
   </Sidebar.Footer>

package/dist/components/core/sidebar/MenuBarSidebar.svelte.d.ts

@@ -1,20 +1,20 @@
 import * as Sidebar from "../../ui/sidebar/index.js";
 import type { ComponentProps } from "svelte";
-import type { NavUserSidebarItem } from "../nav/data/nav-user-sidebar";
-import type { NavMenuItem, NavMenuSidebar } from "../nav/data/nav-menu-sidebar";
+import type { NavUserSidebarProps } from "../nav/data/nav-user-sidebar";
+import type { NavMenuItem, NavMenuSidebarProps } from "../nav/data/nav-menu-sidebar";
 import type { Snippet } from "svelte";
 /**
- * Sidebar de navegação com menus, usuário e botões.
- * @property {NavMenuSidebar[]} menusButtons - Botões do footer (ex: logout)
- * @property {NavMenuItem[]} menus - Itens de navegação principal
- * @property {NavUserSidebarItem} user - Dados do usuário logado
+ * Navigation sidebar with menus, user, and buttons.
+ * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
+ * @property {NavMenuItem[]} menus - Main navigation items
+ * @property {NavUserSidebarItem} user - Logged-in user data
  * @property {Snippet} footer - Snippet customizado do footer
  * @property {Snippet} header - Snippet customizado do header
  */
 type Props = {
-    menusButtons?: NavMenuSidebar[];
+    menusButtons?: NavMenuSidebarProps[];
     menus: NavMenuItem[];
-    user: NavUserSidebarItem;
+    user: NavUserSidebarProps;
     footer?: Snippet;
     header?: Snippet;
 };

package/dist/components/pages/admin/{ui → 01/ui}/AdminContent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
 
-  /** Wrapper de conteúdo para páginas admin. */
+  /** Content wrapper for admin pages. */
   type Props = {
     children?: Snippet;
   };

package/dist/components/pages/admin/{ui → 01/ui}/AdminContent.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-/** Wrapper de conteúdo para páginas admin. */
+/** Content wrapper for admin pages. */
 type Props = {
     children?: Snippet;
 };

package/dist/components/pages/admin/{ui → 01/ui}/AdminPanel.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
-  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
-  import { Separator } from "../../../ui/separator/index.js";
-  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
+  import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
+  import { Separator } from "../../../../ui/separator/index.js";
+  import * as Sidebar from "../../../../ui/sidebar/index.js";
   import type { Snippet } from "svelte";
 
   /**
-   * Layout de admin com sidebar, header e conteúdo.
-   * @property {Snippet} appsidebar - Sidebar da aplicação
-   * @property {Snippet} content - Conteúdo principal
-   * @property {Snippet} breadcrumb - Navegação breadcrumb
+   * Admin layout with sidebar, header, and content.
+   * @property {Snippet} appsidebar - Application sidebar
+   * @property {Snippet} content - Main content
+   * @property {Snippet} breadcrumb - Breadcrumb navigation
    */
   type Props = {
     appsidebar?: Snippet;

package/dist/components/pages/admin/{ui → 01/ui}/AdminPanel.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from "svelte";
 /**
- * Layout de admin com sidebar, header e conteúdo.
- * @property {Snippet} appsidebar - Sidebar da aplicação
- * @property {Snippet} content - Conteúdo principal
- * @property {Snippet} breadcrumb - Navegação breadcrumb
+ * Admin layout with sidebar, header, and content.
+ * @property {Snippet} appsidebar - Application sidebar
+ * @property {Snippet} content - Main content
+ * @property {Snippet} breadcrumb - Breadcrumb navigation
  */
 type Props = {
     appsidebar?: Snippet;

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

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  /**
+   * Side navigation sidebar for documentation pages.
+   * Generates links automatically from document sections.
+   * Navigates internally using anchors (#section-id).
+   *
+   * @component
+   * @example
+   * ```svelte
+   * <DocsSidebar sections={data.sections} activeId="introduction" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { DocSection } from "../types";
+
+  let {
+    sections,
+    activeId,
+  }: {
+    /** Document sections (level 1 titles are displayed as groups). */
+    sections: DocSection[];
+    /** ID of the currently visible section (scroll-spy). */
+    activeId?: string;
+  } = $props();
+
+  /** Flattens level 1 sections with their subsections for the sidebar. */
+  const flatSections = $derived(
+    sections.flatMap((section) => {
+      const items = [
+        {
+          id: section.id,
+          label: section.number
+            ? `${section.number}. ${section.title}`
+            : section.title,
+        },
+      ];
+
+      if (section.subsections) {
+        for (const sub of section.subsections) {
+          items.push({
+            id: sub.id,
+            label: sub.number
+              ? `${sub.number}. ${sub.title}`
+              : sub.title,
+          });
+        }
+      }
+
+      return items;
+    }),
+  );
+</script>
+
+<aside class="w-56 shrink-0 hidden lg:block">
+  <nav class="sticky top-8 flex flex-col gap-1 text-sm">
+    {#each flatSections as item (item.id)}
+      <a
+        href="#{item.id}"
+        class="rounded-md px-2 py-1.5 transition-colors {activeId === item.id
+          ? 'bg-muted text-foreground font-medium'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted/60'}"
+      >
+        {item.label}
+      </a>
+    {/each}
+  </nav>
+</aside>

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

@@ -0,0 +1,10 @@
+import type { DocSection } from "../types";
+type $$ComponentProps = {
+    /** Document sections (level 1 titles are displayed as groups). */
+    sections: DocSection[];
+    /** ID of the currently visible section (scroll-spy). */
+    activeId?: string;
+};
+declare const DocsSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsSidebar = ReturnType<typeof DocsSidebar>;
+export default DocsSidebar;

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

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+  /**
+   * Variant 01 of the Privacy Policy / Terms of Use page.
+   * Three-column layout: navigation sidebar, main content, and TOC.
+   * Includes scroll-spy with IntersectionObserver to highlight the active section.
+   * @component
+   * @example
+   * ```svelte
+   * <PrivacyPolicyOrTermsOfUse01 data={pageData} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { DocPageData } from "../types";
+  import { buildToc } from "../shared/toc";
+  import PrivacyPolicyOrTermsOfUseBreadcrumb from "../shared/PrivacyPolicyOrTermsOfUseBreadcrumb.svelte";
+  import DocSectionView from "../shared/DocSectionView.svelte";
+  import DocsSidebar from "./DocsSidebar.svelte";
+  import TableOfContents from "./TableOfContents.svelte";
+
+  let { data }: { data: DocPageData } = $props();
+
+  const toc = $derived(buildToc(data.sections));
+
+  /** Currently visible section, for highlighting in the TOC (simple scroll-spy). */
+  let activeId = $state<string | undefined>(undefined);
+
+  $effect(() => {
+    const headingEls = toc
+      .map((item) => document.getElementById(item.id))
+      .filter((el): el is HTMLElement => el !== null);
+
+    if (headingEls.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.find((entry) => entry.isIntersecting);
+        if (visible) activeId = visible.target.id;
+      },
+      { rootMargin: "0px 0px -70% 0px", threshold: 0 },
+    );
+
+    headingEls.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="mx-auto max-w-7xl px-6 py-10">
+  <div class="flex gap-10">
+    <DocsSidebar sections={data.sections} {activeId} />
+
+    <main class="min-w-0 flex-1 flex flex-col gap-8">
+      <header class="flex flex-col gap-4">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight">{data.title}</h1>
+          <p class="mt-1 text-sm text-muted-foreground">
+            Latest update: {data.lastUpdated}
+          </p>
+        </div>
+        <PrivacyPolicyOrTermsOfUseBreadcrumb items={data.breadcrumb} />
+      </header>
+
+      <div class="flex flex-col gap-10">
+        {#each data.sections as section (section.id)}
+          <DocSectionView {section} />
+        {/each}
+      </div>
+    </main>
+
+    <TableOfContents items={toc} {activeId} />
+  </div>
+</div>

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

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

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

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+  /**
+   * Table of contents (TOC) panel with scroll-spy.
+   * Displays links to document sections with the active section highlighted.
+   * @component
+   * @example
+   * ```svelte
+   * <TableOfContents items={tocItems} activeId="introduction" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { TocItem } from "../types";
+
+  let { items, activeId }: { items: TocItem[]; activeId?: string } = $props();
+</script>
+
+<aside class="w-56 shrink-0 hidden xl:block">
+  <nav
+    aria-label="Table of contents"
+    class="sticky top-8 flex flex-col gap-1 text-sm"
+  >
+    {#each items as item (item.id)}
+      <a
+        href="#{item.id}"
+        class="border-l-2 py-1 transition-colors {item.level === 2
+          ? 'pl-6 text-muted-foreground/80'
+          : 'pl-3'} {activeId === item.id
+          ? 'border-foreground text-foreground font-medium'
+          : 'border-border text-muted-foreground hover:text-foreground'}"
+      >
+        {item.label}
+      </a>
+    {/each}
+  </nav>
+</aside>

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

@@ -0,0 +1,8 @@
+import type { TocItem } from "../types";
+type $$ComponentProps = {
+    items: TocItem[];
+    activeId?: string;
+};
+declare const TableOfContents: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;

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

@@ -0,0 +1,59 @@
+<script lang="ts" module>
+  /**
+   * Documentation page hero with banner and content sections.
+   * Combines PageHero with document section rendering.
+   * @component
+   * @example
+   * ```svelte
+   * <DocsPageHero data={pageData} accent="#f0400f" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import DocSectionView from "../shared/DocSectionView.svelte";
+  import type { DocPageData } from "../types";
+  import PageHero from "./PageHero.svelte";
+
+  let {
+    data,
+    accent,
+  }: {
+    /** Page data — uses title, lastUpdated, and sections. */
+    data: Pick<DocPageData, "title" | "lastUpdated" | "sections">;
+    /** Hero banner background color. */
+    accent?: string;
+  } = $props();
+</script>
+
+<div class="min-h-screen bg-background">
+  <PageHero title={data.title} lastUpdated={data.lastUpdated} {accent}>
+    {#snippet action()}
+      <button
+        type="button"
+        aria-label="Search"
+        class="flex h-9 w-9 items-center justify-center rounded-md bg-white/15 hover:bg-white/25 transition-colors"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+      </button>
+    {/snippet}
+  </PageHero>
+
+  <main class="mx-auto max-w-3xl px-6 py-12 flex flex-col gap-10">
+    {#each data.sections as section (section.id)}
+      <DocSectionView {section} />
+    {/each}
+  </main>
+</div>

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

@@ -0,0 +1,10 @@
+import type { DocPageData } from "../types";
+type $$ComponentProps = {
+    /** Page data — uses title, lastUpdated, and sections. */
+    data: Pick<DocPageData, "title" | "lastUpdated" | "sections">;
+    /** Hero banner background color. */
+    accent?: string;
+};
+declare const DocsPageHero: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsPageHero = ReturnType<typeof DocsPageHero>;
+export default DocsPageHero;