negodesign 0.0.30 → 0.0.32

package/dist/components/core/nav/data/nav-menu-sidebar.d.ts

@@ -1,21 +1,50 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Grupo/categoria de menus na sidebar (ex: "Gestão", "Relatórios").
+ */
 export interface GroupMenuSidebarProps {
+    /** Nome/título do grupo de menus */
     name: string;
 }
+/**
+ * Submenu de um item principal da sidebar.
+ */
 export interface SubMenuSidebarProps {
+    /** Título do submenu */
     title: string;
+    /** URL de destino do submenu */
     url: string;
+    /** Ícone SVG do submenu */
     icon: IconSvgElement;
+    /** Indica se o submenu está ativo/selecionado */
     isActive?: boolean;
 }
+/**
+ * Item de menu principal da sidebar.
+ * Pode ser um item simples ou ter submenus.
+ */
 export interface NavMenuSidebarProps {
+    /** Título/nome do item de menu */
     title: string;
+    /** URL de destino (se não tiver submenus) */
     url?: string;
+    /** Ícone SVG do item de menu */
     icon: IconSvgElement;
+    /** Indica se o item está ativo/selecionado */
     isActive?: boolean;
+    /** Grupo/categoria a que o menu pertence */
     group?: GroupMenuSidebarProps;
 }
+/**
+ * Item de menu com submenus aninhados.
+ * Estende NavMenuSidebarProps adicionando suporte a submenus.
+ */
 export interface NavMenuAndSubmenuSidebarProps extends NavMenuSidebarProps {
+    /** Lista de submenus abaixo do item principal */
     submenus?: SubMenuSidebarProps[];
 }
+/**
+ * Tipo união para itens da barra lateral — pode ser
+ * um item simples ou um item com submenus.
+ */
 export type NavMenuItem = NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps;

package/dist/components/core/nav/data/nav-menu.d.ts

@@ -1,36 +1,79 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Props do logotipo no NavMenu.
+ */
 export interface NavMenuLogoProps {
+    /** URL da imagem do logotipo */
     img?: string;
+    /** URL de destino ao clicar no logo */
     url?: string;
+    /** Texto alternativo / label do logo */
     label: string;
+    /** Classe CSS adicional */
     className?: string;
+    /** Callback ao clicar no logo */
     onclick?: () => void;
 }
+/**
+ * Props de um link individual no menu de navegação.
+ */
 export interface NavMenuLinksProps {
+    /** URL de destino do link */
     url?: string;
+    /** Alias de `url` — URL de destino do link (compatibilidade) */
+    href?: string;
+    /** Texto exibido no link */
     label: string;
+    /** Ícone SVG opcional antes do label */
     icon?: IconSvgElement;
+    /** Callback ao clicar no link */
     onclick?: () => void;
 }
+/**
+ * Props de um item de ação (botão ou link) no menu de navegação.
+ * Usado para login, registo, etc.
+ */
 export interface NavMenuActionsProps {
+    /** URL de destino da ação */
     url?: string;
+    /** Texto exibido na ação */
     label: string;
+    /** Tipo de elemento: botão estilizado ou link simples */
     type?: 'BUTTON' | 'LINK';
+    /** Classe CSS adicional */
     className?: string;
+    /** Ícone SVG opcional */
     icon?: IconSvgElement;
+    /** Callback ao clicar na ação */
     onclick?: () => void;
 }
+/**
+ * Props do componente NavMenu — barra de navegação principal
+ * com logo, links, ações (login/registo), language switcher e light switch.
+ */
 export interface NavMenuProps {
+    /** Classe CSS adicional para o container do nav */
     navClass?: string;
+    /** Classe CSS personalizada para cada link */
     linkClass?: string;
+    /** Classe CSS personalizada para o grupo de links/açōes */
     groupClass?: string;
+    /** Classe CSS personalizada para os botões */
     buttonClass?: string;
+    /** Configuração do logotipo */
     logo?: NavMenuLogoProps;
+    /** Lista de links de navegação */
     links: NavMenuLinksProps[];
+    /** Lista de ações (ex: Login, Registar) */
     actions?: NavMenuActionsProps[];
+    /** Alinhamento dos links e das ações */
     align?: 'LINK_SEPARATED_ACTIONS' | 'LINK_INTO_ACTIONS';
+    /** Exibe o interruptor de tema (claro/escuro) */
     isLightSwitch?: boolean;
+    /** Exibe o seletor de idioma */
     isLanguageSwitcher?: boolean;
+    /** Callback ao clicar no botão Login */
     onclickButtonLogin?: () => void;
+    /** Callback ao clicar no botão Registar */
     onclickButtonRegister?: () => void;
 }

package/dist/components/core/nav/data/nav-user-sidebar.d.ts

@@ -1,14 +1,28 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Props do bloco de usuário logado na sidebar.
+ * Contém dados do usuário (nome, email, avatar), ações rápidas
+ * e callback de logout.
+ */
 export interface NavUserSidebarProps {
+    /** Dados do utilizador autenticado */
     user: {
+        /** Nome completo do utilizador */
         name: string;
+        /** Email do utilizador */
         email: string;
+        /** URL da imagem de perfil/avatar (opcional) */
         avatar?: string;
     };
+    /** Lista de ações rápidas (ex: "Perfil", "Definições") */
     actions?: {
+        /** Texto exibido na ação */
         label: string;
+        /** Ícone SVG da ação */
         icon: IconSvgElement;
+        /** Callback acionado ao clicar na ação */
         onclick?: () => void;
     }[];
+    /** Callback acionado ao clicar no botão de terminar sessão */
     onLogout?: () => void;
 }

package/dist/components/core/nav/ui/menu-links.svelte

@@ -16,7 +16,7 @@
             <li>
                 <a
                     class={`flex items-center gap-1 ${linkClass}`}
-                    href={item.url || "#"}
+                    href={item.url ?? item.href ?? "#"}
                 >
                     {#if item.icon}
                         <HugeiconsIcon icon={item.icon} size={15} />

package/dist/components/core/panel/CarouselSlot.svelte

@@ -24,7 +24,7 @@
     <Carousel.Content
       class={positionButtonPreviousAndNext == "top_right" ? "" : "ml-0"}
     >
-      {@render children()}
+      {@render children?.()}
     </Carousel.Content>
     {#if positionButtonPreviousAndNext == "center"}
       {#if isButtonPreviousAndNext}

package/dist/components/core/panel/type.d.ts

@@ -1,11 +1,22 @@
 import type { CarouselPlugins } from "../../ui/carousel/context";
 import type { Snippet } from "svelte";
+/**
+ * Props do slot/container de carousel (CarouselSlot).
+ * Controla botões de navegação, bordas, plugins e conteúdo customizado.
+ */
 export type CarouselSlotProps = {
+    /** Posição dos botões anterior/próximo: centro ou canto superior direito */
     positionButtonPreviousAndNext?: "center" | "top_right";
+    /** Classe CSS personalizada para botões anterior/próximo */
     buttonPreviousAndNextClass?: string;
+    /** Exibe os botões anterior/próximo */
     isButtonPreviousAndNext?: boolean;
+    /** Exibe borda inferior no slot */
     isBorderBottom?: boolean;
+    /** Classe CSS adicional para o container */
     containerClass?: string;
+    /** Plugins do carousel (ex: autoplay, loop) */
     plugins?: CarouselPlugins;
+    /** Snippet de conteúdo customizado renderizado dentro do slot */
     children?: Snippet;
 };

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

@@ -1,15 +1,27 @@
-/** Props for the search input component. */
+/**
+ * Props base para o componente de input de busca.
+ */
 export interface SearchItemProps {
-    /** Callback fired when the user submits the search. */
+    /** Callback acionado ao submeter a busca (enter ou clique no botão) */
     onSubmit?: (q: string) => void;
-    /** Placeholder text for the input field. */
+    /** Classe CSS personalizada para o botão de busca */
     buttonClass?: string;
+    /** Placeholder exibido no campo de input */
     placeholder?: string;
+    /** Classe CSS personalizada para o campo de input */
     inputClass?: string;
+    /** Classe CSS personalizada para o ícone de busca */
     iconClass?: string;
 }
-/** Extended search input props with a visual variant option. */
+/**
+ * Props do SearchInput — input de busca completo com duas variantes visuais.
+ * @extends SearchItemProps
+ */
 export interface SearchInputProps extends SearchItemProps {
-    /** Visual variant: 1 = full border, 2 = bottom border only. */
+    /**
+     * Variante visual do input de busca.
+     * 1 = borda completa ao redor;
+     * 2 = apenas borda inferior (underline style).
+     */
     variant?: 1 | 2;
 }

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

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { NavUserSidebarProps } from "../nav/data/nav-user-sidebar";
+import type { NavMenuItem, NavMenuSidebarProps } from "../nav/data/nav-menu-sidebar";
+/**
+ * Props do componente MenuBarSidebar — sidebar de navegação admin
+ * com menus, usuário logado e botões de ação (ex: logout).
+ */
+export interface MenuBarSidebarProps {
+    /** Botões do rodapé da sidebar (ex: logout) */
+    menusButtons?: NavMenuSidebarProps[];
+    /** Itens de navegação principal */
+    menus: NavMenuItem[];
+    /** Dados do usuário logado */
+    user: NavUserSidebarProps;
+    /** Snippet customizado para o footer da sidebar */
+    footer?: Snippet;
+    /** Snippet customizado para o header da sidebar */
+    header?: Snippet;
+}

package/dist/components/core/sidebar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/core/tabs/data/TabModel.d.ts

@@ -1,9 +1,20 @@
 import type { Snippet } from "svelte";
+/**
+ * Item básico de uma aba — valor identificador e label visível.
+ */
 export interface TabItem {
+    /** Texto exibido na aba */
     label: string;
+    /** Valor único identificador da aba */
     value: string;
 }
+/**
+ * Props completas de uma aba no TabUnderline — item (label/value)
+ * mais o conteúdo (Snippet) renderizado quando a aba está ativa.
+ */
 export interface TabProps {
+    /** Dados da aba (label + valor) */
     item: TabItem;
+    /** Snippet com o conteúdo exibido ao selecionar a aba */
     children?: Snippet;
 }

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

@@ -0,0 +1,11 @@
+import type { TabProps } from "./data/TabModel";
+/**
+ * Props do componente TabUnderline — abas com estilo underline
+ * que trocam o conteúdo conforme a aba selecionada.
+ */
+export interface TabUnderlineProps {
+    /** Lista de abas com seu conteúdo (Snippet) */
+    items?: TabProps[];
+    /** Classe CSS adicional para o container */
+    className?: string;
+}

package/dist/components/core/tabs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pages/admin/01/ui/types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+/**
+ * Props do componente AdminPanel — layout principal de administração
+ * com sidebar, header (breadcrumb, language switcher, light switch) e área de conteúdo.
+ */
+export interface AdminPanelProps {
+    /** Snippet com a sidebar da aplicação */
+    appsidebar?: Snippet;
+    /** Snippet com o conteúdo principal */
+    content?: Snippet;
+    /** Snippet com a navegação breadcrumb */
+    breadcrumb?: Snippet;
+}
+/**
+ * Props do componente AdminContent — wrapper de conteúdo
+ * para páginas admin com padding e layout flex.
+ */
+export interface AdminContentProps {
+    /** Snippet com o conteúdo interno da página */
+    children?: Snippet;
+}

package/dist/components/pages/admin/01/ui/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pages/product-details/01/ProductDetails01.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+  /**
+   * Variante 01 da página de detalhes do produto.
+   * Layout de duas colunas: galeria à esquerda e informações/compra à direita.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetails01 {data} {onBuy} {onFavorite} {onCart} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import ProductDetailBreadcrumb from "../shared/ProductDetailBreadcrumb.svelte";
+  import ProductDetailDescription from "../shared/ProductDetailDescription.svelte";
+  import ProductDetailFeatures from "../shared/ProductDetailFeatures.svelte";
+  import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
+  import ProductDetailImage from "../shared/ProductDetailImage.svelte";
+  import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailTags from "../shared/ProductDetailTags.svelte";
+  import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
+  import type { ProductDetailsData } from "../types";
+
+  let {
+    data,
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+  } = $props();
+</script>
+
+<div class="mx-auto max-w-7xl px-6 py-10">
+  <div class="mb-8">
+    <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
+  </div>
+
+  <div class="grid gap-10 lg:grid-cols-2">
+    <ProductDetailImage images={data.gallery} {isLoading} />
+
+    <div class="flex flex-col gap-5">
+      <ProductDetailHeader title={data.title} subtitle={data.subtitle} {isLoading} />
+
+      <ProductDetailTags tags={data.tags} {isLoading} />
+
+      <ProductDetailDescription
+        description={data.description}
+        longDescription={data.longDescription}
+        {isLoading}
+      />
+
+      {#if data.features}
+        <ProductDetailFeatures features={data.features} {isLoading} />
+      {/if}
+
+      <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+    </div>
+  </div>
+
+  {#if data.location}
+    <div class="mt-12">
+      <ProductDetailMap location={data.location} {isLoading} />
+    </div>
+  {/if}
+</div>

package/dist/components/pages/product-details/01/ProductDetails01.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProductDetailsData } from "../types";
+type $$ComponentProps = {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+};
+declare const ProductDetails01: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetails01 = ReturnType<typeof ProductDetails01>;
+export default ProductDetails01;

package/dist/components/pages/product-details/02/ProductDetails02.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+  /**
+   * Variante 02 da página de detalhes do produto.
+   * Layout com galeria em destaque e conteúdo em coluna centralizada.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetails02 {data} {onBuy} {onFavorite} {onCart} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import ProductDetailBreadcrumb from "../shared/ProductDetailBreadcrumb.svelte";
+  import ProductDetailDescription from "../shared/ProductDetailDescription.svelte";
+  import ProductDetailFeatures from "../shared/ProductDetailFeatures.svelte";
+  import ProductDetailFilesVertical from "../shared/ProductDetailFilesVertical.svelte";
+  import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
+  import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailTags from "../shared/ProductDetailTags.svelte";
+  import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
+  import type { ProductDetailsData } from "../types";
+
+  let {
+    data,
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+  } = $props();
+</script>
+
+<div class="bg-background">
+  <ProductDetailFilesVertical
+    images={data.gallery}
+    className="mx-auto max-w-5xl px-6 pt-10"
+    {isLoading}
+  />
+
+  <div class="mx-auto max-w-3xl px-6 py-12">
+    <div class="flex flex-col gap-6">
+      <div class="flex justify-center">
+        <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
+      </div>
+
+      <ProductDetailHeader
+        title={data.title}
+        subtitle={data.subtitle}
+        className="items-center text-center"
+        {isLoading}
+      />
+
+      <div class="flex justify-center">
+        <ProductDetailTags tags={data.tags} {isLoading} />
+      </div>
+
+      <ProductDetailDescription
+        description={data.description}
+        longDescription={data.longDescription}
+        {isLoading}
+      />
+
+      {#if data.features}
+        <div class="mx-auto w-full max-w-md">
+          <ProductDetailFeatures features={data.features} {isLoading} />
+        </div>
+      {/if}
+
+      <div class="flex justify-center">
+        <div class="w-full max-w-sm">
+          <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {#if data.location}
+    <div class="mx-auto max-w-3xl px-6 pb-12">
+      <ProductDetailMap location={data.location} {isLoading} />
+    </div>
+  {/if}
+</div>

package/dist/components/pages/product-details/02/ProductDetails02.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProductDetailsData } from "../types";
+type $$ComponentProps = {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+};
+declare const ProductDetails02: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetails02 = ReturnType<typeof ProductDetails02>;
+export default ProductDetails02;

package/dist/components/pages/product-details/03/ProductDetails03.svelte

@@ -0,0 +1,77 @@
+<script lang="ts" module>
+  /**
+   * Variante 03 da página de detalhes do produto.
+   * Layout com galeria, conteúdo expandido e painel de compra sticky.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetails03 {data} {onBuy} {onFavorite} {onCart} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import ProductDetailBreadcrumb from "../shared/ProductDetailBreadcrumb.svelte";
+  import ProductDetailDescription from "../shared/ProductDetailDescription.svelte";
+  import ProductDetailFeatures from "../shared/ProductDetailFeatures.svelte";
+  import ProductDetailFilesVertical from "../shared/ProductDetailFilesVertical.svelte";
+  import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
+  import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailTags from "../shared/ProductDetailTags.svelte";
+  import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
+  import type { ProductDetailsData } from "../types";
+
+  let {
+    data,
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+  } = $props();
+</script>
+
+<div class="mx-auto max-w-7xl px-6 py-10">
+  <div class="mb-8">
+    <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
+  </div>
+
+  <div class="grid gap-10 lg:grid-cols-[1fr_22rem]">
+    <div class="flex flex-col gap-8">
+      <ProductDetailFilesVertical images={data.gallery} {isLoading} />
+
+      <div class="flex flex-col gap-5">
+        <ProductDetailHeader title={data.title} subtitle={data.subtitle} {isLoading} />
+
+        <ProductDetailTags tags={data.tags} {isLoading} />
+
+        <ProductDetailDescription
+          description={data.description}
+          longDescription={data.longDescription}
+          {isLoading}
+        />
+
+        {#if data.features}
+          <ProductDetailFeatures features={data.features} {isLoading} />
+        {/if}
+      </div>
+    </div>
+
+    <aside class="lg:sticky lg:top-8 lg:self-start">
+      <div class="rounded-lg border p-6">
+        <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+      </div>
+    </aside>
+  </div>
+
+  {#if data.location}
+    <div class="mt-12">
+      <ProductDetailMap location={data.location} {isLoading} />
+    </div>
+  {/if}
+</div>

package/dist/components/pages/product-details/03/ProductDetails03.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProductDetailsData } from "../types";
+type $$ComponentProps = {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+};
+declare const ProductDetails03: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetails03 = ReturnType<typeof ProductDetails03>;
+export default ProductDetails03;

package/dist/components/pages/product-details/04/ProductDetails04.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>
+  /**
+   * Variante 04 da página de detalhes do produto.
+   * Layout com galeria, informações e abas de conteúdo (descrição,
+   * avaliações) abaixo dos dados principais.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetails04 {data} {onBuy} {onFavorite} {onCart} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import ProductDetailBreadcrumb from "../shared/ProductDetailBreadcrumb.svelte";
+  import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
+  import ProductDetailImage from "../shared/ProductDetailImage.svelte";
+  import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailTags from "../shared/ProductDetailTags.svelte";
+  import ProductDetailTabs from "../shared/ProductDetailTabs.svelte";
+  import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
+  import type { ProductDetailsData } from "../types";
+
+  let {
+    data,
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+  } = $props();
+</script>
+
+<div class="mx-auto max-w-7xl px-6 py-10">
+  <div class="mb-8">
+    <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
+  </div>
+
+  <div class="grid gap-10 lg:grid-cols-2">
+    <ProductDetailImage images={data.gallery} {isLoading} />
+
+    <div class="flex flex-col gap-5">
+      <ProductDetailHeader title={data.title} subtitle={data.subtitle} {isLoading} />
+
+      <ProductDetailTags tags={data.tags} {isLoading} />
+
+      <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+    </div>
+  </div>
+
+  <div class="mt-12 border-t pt-8">
+    <ProductDetailTabs tabs={data.tabs} {data} {isLoading} />
+  </div>
+
+  {#if data.location}
+    <div class="mt-12">
+      <ProductDetailMap location={data.location} {isLoading} />
+    </div>
+  {/if}
+</div>