negodesign 0.0.30 → 0.0.32

package/dist/index.js

@@ -13,6 +13,8 @@ import AdCardBanner from "./components/core/banner/AdCardBanner.svelte";
 import CtaCardBanner from "./components/core/banner/CtaCardBanner.svelte";
 import NotificationBanner from "./components/core/banner/NotificationBanner.svelte";
 import PrivacyPolicyOrTermsOfUse from "./components/pages/privacy-policy-or-terms-of-use/PrivacyPolicyOrTermsOfUse.svelte";
+import ProductDetails from "./components/pages/product-details/ProductDetails.svelte";
+import ProfileUser from "./components/pages/profile-user/ProfileUser.svelte";
 import PageOtpVerification from "./components/pages/security/otp-verification/PageOtpVerification.svelte";
 import PageForgetPassword from "./components/pages/security/forget-password/PageForgetPassword.svelte";
 import PageResetPassword from "./components/pages/security/reset-password/PageResetPassword.svelte";
@@ -39,47 +41,210 @@ export { getMergedTranslations } from "./i18n/config";
 /** Retorna a lista de idiomas disponíveis. */
 export { getLocales } from "./i18n/config";
 export { 
-/** Componente raiz do Negodesign. Configura o tema, idioma e traduções. @property {Record<string, Record<string, string>>} translations - Traduções customizadas @property {Snippet} children - Conteúdo da aplicação */
-NegoDesign, NavMenu, AdCardBanner, CtaCardBanner, 
-/** Banner de notificação com texto, CTA e botão dismiss. @see NotificationBannerProps */
-NotificationBanner, SearchInput, CarouselBadge, CarouselHero, Footer, 
-/** Carousel de promoções com cards de produto. @see CarouselPromotionProps */
+/**
+ * Componente raiz do Negodesign.
+ * Configura o tema, idioma e traduções da aplicação.
+ * @property {Record<string, Record<string, string>>} translations - Traduções customizadas
+ * @property {Snippet} children - Conteúdo da aplicação
+ */
+NegoDesign, 
+/**
+ * Barra de navegação principal com logo, links, ações (login/registo),
+ * language switcher e light switch integrados.
+ * @see NavMenuProps
+ */
+NavMenu, 
+/**
+ * Banner de anúncio com faixa lateral colorida, título destacado e botão CTA.
+ * Ideal para publicidade, chamadas de atenção ou ofertas especiais.
+ * @see AdCardBannerProps
+ */
+AdCardBanner, 
+/**
+ * Banner CTA "Vamos entrar em contacto" com título bold, descrição de apoio
+ * e até 2 botões em formato de pílula com decoração de anéis concêntricos.
+ * @see CtaCardBannerProps
+ */
+CtaCardBanner, 
+/**
+ * Banner de notificação com texto em destaque, descrição, CTA e botão dismiss.
+ * Usado para comunicar novidades, promoções ou mensagens importantes.
+ * @see NotificationBannerProps
+ */
+NotificationBanner, 
+/**
+ * Campo de input de busca com 2 variantes visuais (borda completa ou underline).
+ * Inclui botão de submissão e callback onSubmit.
+ * @see SearchInputProps
+ */
+SearchInput, 
+/**
+ * Carousel de badges/categorias com orientação horizontal ou vertical.
+ * Cada item pode ter ícone, imagem, label e callback de clique.
+ * @see CarouselBadgeProps
+ */
+CarouselBadge, 
+/**
+ * Carousel hero em fullscreen com slides de imagem, título, descrição
+ * e menu de navegação sobreposto. Ideal para páginas de login.
+ * @see CarouselHeroProps
+ */
+CarouselHero, 
+/**
+ * Rodapé completo com múltiplas colunas de links, logo, ícones de redes sociais
+ * e formulário de newsletter opcional.
+ * @see FooterProps
+ */
+Footer, 
+/**
+ * Carousel de cards de promoção com preços antigo/novo, botão de comprar,
+ * favoritar e adicionar ao carrinho.
+ * @see CarouselPromotionProps
+ */
 CarouselPromotion, 
-/** Carousel de destaques com cards de organização. @see CarouselHighlightsProps */
+/**
+ * Carousel de cards de destaque para organizações, serviços ou locais em evidência.
+ * Suporta duas variantes visuais.
+ * @see CarouselHighlightsProps
+ */
 CarouselHighlights, 
-/** Carousel em grid de mídia (imagens/vídeos). Em mobile vira carousel normal. @see CarouselMediaProps */
+/**
+ * Layout em grid responsivo de cards de mídia (imagens ou vídeos).
+ * Em telas mobile transforma-se num carousel com swipe.
+ * @see CarouselMediaProps
+ */
 CarouselGridMedia, 
-/** Carousel em grid de perfil. Em mobile vira carousel normal. @see CarouselProfileProps */
-CarouselGridProfile, TabUnderline, 
-/** Página de login com carousel hero e card de autenticação. @see PageLoginProps */
+/**
+ * Layout em grid responsivo de cards de perfil (guias, intérpretes, organizações).
+ * Em telas mobile transforma-se num carousel com swipe.
+ * @see CarouselProfileProps
+ */
+CarouselGridProfile, 
+/**
+ * Componente de abas com estilo underline. Troca o conteúdo (Snippet)
+ * conforme a aba selecionada.
+ * @see TabUnderlineProps
+ */
+TabUnderline, 
+/**
+ * Página de login completa com carousel hero ao fundo e card de autenticação
+ * com múltiplas variantes (email, username, telefone) e formulário de registo.
+ * @see PageLoginProps
+ */
 PageLogin, 
-/** Página de recuperação de senha com carousel hero e card de recuperação. @see PageForgetPasswordProps */
+/**
+ * Página de recuperação de senha com hero carousel e card de solicitação
+ * de link de recuperação por email.
+ * @see PageForgetPasswordProps
+ */
 PageForgetPassword, 
-/** Página de redefinição de senha com carousel hero e card de redefinição. @see PageResetPasswordProps */
+/**
+ * Página de redefinição de senha com hero carousel e card para introduzir
+ * e confirmar a nova palavra-passe.
+ * @see PageResetPasswordProps
+ */
 PageResetPassword, 
-/** Página de redefinição de senha com carousel hero e card de redefinição. @see PrivacyPolicyOrTermsOfUseProps */
+/**
+ * Página de política de privacidade ou termos de utilização com sidebar,
+ * tabela de conteúdos e blocos de conteúdo navegáveis.
+ * @see PrivacyPolicyOrTermsOfUseProps
+ */
 PrivacyPolicyOrTermsOfUse, 
-/** Página de verificação OTP com carousel hero e card de verificação. @see PageOtpVerificationProps */
+/**
+ * Página de detalhes do produto com 4 variantes de layout, galeria de imagens,
+ * avaliações, mapa, ficheiros, tabs e painel de compra.
+ * @see ProductDetailsProps
+ */
+ProductDetails, 
+/**
+ * Página de perfil de utilizador com 3 variantes de layout.
+ * Inclui informação básica, alterar senha, preferências e experiência.
+ * - varient=1: Header colorido com dados admin, tabs e painel de detalhes.
+ * - varient=2: Banner com avatar sobreposto, formulário alterar senha (Security).
+ * - varient=3: Header roxo com tabs de experiência e timeline.
+ * @see ProfileUserProps
+ */
+ProfileUser, 
+/**
+ * Página de verificação OTP com hero carousel e card de input de código
+ * de 6 dígitos para validação de login ou recuperação.
+ * @see PageOtpVerificationProps
+ */
 PageOtpVerification, 
-/** Tabela de dados genérica com paginação, ordenação e filtros. @see DataTableItem */
+/**
+ * Tabela de dados genérica construída sobre o TanStack Table.
+ * Inclui paginação, ordenação, filtros, badges, coluna de seleção,
+ * drag handle e ações personalizadas por linha.
+ * @template T Tipo genérico dos itens/linhas
+ * @see DataTableCoreProps
+ */
 DataTableCore, 
-/** Sidebar de navegação com menus, usuário e botões. @see MenuBarSidebar */
+/**
+ * Sidebar de navegação administrativa com menu colapsável, cabeçalho customizável,
+ * lista de menus/submenus, botões do rodapé e bloco de utilizador logado.
+ * @see MenuBarSidebarProps
+ */
 MenuBarSidebar, 
-/** 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 */
+/**
+ * Layout principal da área administrativa. Composto por provider de sidebar,
+ * header com trigger da sidebar, breadcrumb, language switcher, light switch
+ * e área de conteúdo principal.
+ * @property {Snippet} appsidebar - Snippet com a sidebar da aplicação
+ * @property {Snippet} content - Snippet com o conteúdo principal
+ * @property {Snippet} breadcrumb - Snippet com a navegação breadcrumb
+ */
 AdminPanel, 
-/** Wrapper de conteúdo para páginas admin. @property {Snippet} children - Conteúdo interno */
+/**
+ * Wrapper de conteúdo para páginas administrativas.
+ * Aplica padding, layout flex colunar e gaps consistentes entre secções.
+ * @property {Snippet} children - Snippet com o conteúdo interno da página
+ */
 AdminContent, 
-/** Campo de input para email. @property {string} value - Valor vinculado @property {string} label - Rótulo personalizado */
+/**
+ * Campo de input para email com validação, ícone e label integrados.
+ * Suporta two-way binding via prop `value`.
+ * @property {string} value - Valor vinculado do input
+ * @property {string} label - Rótulo personalizado do campo
+ */
 InputEmail, 
-/** Campo de input para telefone. @property {string} value - Valor vinculado @property {string} label - Rótulo personalizado */
+/**
+ * Campo de input para número de telefone com seletor de país (código + bandeira)
+ * e validação do formato.
+ * @property {string} value - Valor vinculado do input
+ * @property {string} label - Rótulo personalizado do campo
+ */
 InputPhone, 
-/** Campo de input para email ou telefone. @property {string} value - Valor vinculado @property {string} label - Rótulo personalizado */
+/**
+ * Campo de input híbrido que aceita tanto email como número de telefone.
+ * Detecta automaticamente o tipo com base no valor introduzido.
+ * @property {string} value - Valor vinculado do input
+ * @property {string} label - Rótulo personalizado do campo
+ */
 InputEmailOrPhone, 
-/** Campo de input para código OTP. @property {number} length - Quantidade de caixas @property {boolean} separator - Exibir separador */
+/**
+ * Campo de input para código OTP (One-Time Password) com N caixas de dígitos separadas.
+ * Suporta separador visual entre grupos de dígitos.
+ * @property {number} length - Quantidade de caixas de dígitos (padrão: 6)
+ * @property {boolean} separator - Exibir separador visual entre grupos
+ */
 InputCodeOtp, 
-/** Campo de input para senha. @property {string} value - Valor vinculado @property {string} label - Rótulo personalizado */
+/**
+ * Campo de input para senha com toggle de visibilidade (ícone de olho).
+ * Suporta two-way binding e validações customizadas.
+ * @property {string} value - Valor vinculado do input
+ * @property {string} label - Rótulo personalizado do campo
+ */
 InputPassword, 
-/** Campo de input para nome de usuário. @property {string} value - Valor vinculado @property {string} label - Rótulo personalizado */
+/**
+ * Campo de input para nome de utilizador com ícone e label integrados.
+ * @property {string} value - Valor vinculado do input
+ * @property {string} label - Rótulo personalizado do campo
+ */
 InputUsername, 
-/** Campo de input para confirmação de senha. @property {string} value - Valor vinculado @property {string} label - Rótulo personalizado */
+/**
+ * Campo de input para confirmação de senha. Integra-se com InputPassword
+ * para validar correspondência entre os dois campos.
+ * @property {string} value - Valor vinculado do input
+ * @property {string} label - Rótulo personalizado do campo
+ */
 InputPasswordConfirm };

package/dist/types/index.d.ts

@@ -2,13 +2,119 @@ import type { LoginVariant, LoginRequestDto, LinkProps, PageLoginProps } from ".
 import type { ForgetPasswordVariant, ForgetPasswordRequestDto, PageForgetPasswordProps } from "../components/pages/security/forget-password/types";
 import type { ResetPasswordRequestDto, PageResetPasswordProps } from "../components/pages/security/reset-password/types";
 import type { OtpVerificationRequestDto, PageOtpVerificationProps } from "../components/pages/security/otp-verification/types";
-import type { NavMenuLinksProps } from "../components/core/nav/data/nav-menu";
+import type { NavMenuLinksProps, NavMenuLogoProps, NavMenuActionsProps, NavMenuProps } from "../components/core/nav/data/nav-menu";
+import type { NavMenuSidebarProps, NavMenuAndSubmenuSidebarProps, GroupMenuSidebarProps, SubMenuSidebarProps, NavMenuItem } from "../components/core/nav/data/nav-menu-sidebar";
+import type { NavUserSidebarProps } from "../components/core/nav/data/nav-user-sidebar";
+import type { CardMediaProps, CardProfileProps, CardPromotionProps, CardHighlightProps, CardTagsProps } from "../components/core/card/types";
+import type { CarouselGridMediaProps } from "../components/core/carousel/grid/media/types";
+import type { CarouselGridProfileProps } from "../components/core/carousel/grid/profile/types";
+import type { CarouselHighlightsProps } from "../components/core/carousel/highlights/types";
+import type { CarouselPromotionProps } from "../components/core/carousel/promotion/types";
+import type { ItemCarousel, CarouselHeaderProps, CarouselBadgeProps, CarouselHeroItem, CarouselHeroProps } from "../components/core/carousel/types";
+import type { CarouselSlotProps } from "../components/core/panel/type";
+import type { BannerProps, AdCardBannerProps, CtaCardBannerProps, NotificationBannerProps } from "../components/core/banner/types";
+import type { TabItem, TabProps } from "../components/core/tabs/data/TabModel";
+import type { TabUnderlineProps } from "../components/core/tabs/types";
+import type { SearchItemProps, SearchInputProps } from "../components/core/search/types";
+import type { FooterLinkItem, FooterSocialItem, FooterColumnProps, FooterProps } from "../components/core/footer/types";
+import type { MenuBarSidebarProps } from "../components/core/sidebar/types";
+import type { DataTableItem, DataTableCoreProps } from "../components/core/datatable/data/data-table";
+import type { AdminPanelProps, AdminContentProps } from "../components/pages/admin/01/ui/types";
+import type { ProfileUserProps, ProfileUserData, ProfileUserVariant, ProfileUserAddress, ProfileUserNote, ProfileUserNotificationPref, ProfileUserMarketingPref, ProfileUserExperience } from "../components/pages/profile-user/types";
+import type { ProductDetailsProps, ProductDetailsData, ProductDetailsBreadcrumbItem, ProductDetailsTag, ProductDetailsImage, ProductDetailsLocation, ProductDetailsReview, ProductDetailsTab } from "../components/pages/product-details/types";
+import type { PrivacyPolicyOrTermsOfUseProps, DocPageData, DocSection, ContentBlock, BreadcrumbItem, TocItem } from "../components/pages/privacy-policy-or-terms-of-use/types";
+import type { InputLabelProps } from "../components/core/form/data/InputLabel.svelte";
+import type { NegoDesignProps } from "../components/types";
 export type { 
-/** @see NavMenuLinksProps */
+/** Props de um link individual no menu de navegação. @see NavMenuLinksProps */
 NavMenuLinksProps, 
-/**  Dados necessários para autenticação de um utilizador. @see LoginRequestDto */
+/** Props do logotipo no NavMenu. @see NavMenuLogoProps */
+NavMenuLogoProps, 
+/** Props de um item de ação (botão ou link) no menu de navegação. @see NavMenuActionsProps */
+NavMenuActionsProps, 
+/** Props do componente NavMenu — barra de navegação principal. @see NavMenuProps */
+NavMenuProps, 
+/** Item de menu principal da sidebar. @see NavMenuSidebarProps */
+NavMenuSidebarProps, 
+/** Item de menu com submenus aninhados na sidebar. @see NavMenuAndSubmenuSidebarProps */
+NavMenuAndSubmenuSidebarProps, 
+/** Grupo/categoria de menus na sidebar. @see GroupMenuSidebarProps */
+GroupMenuSidebarProps, 
+/** Submenu de um item principal da sidebar. @see SubMenuSidebarProps */
+SubMenuSidebarProps, 
+/** Tipo união para itens da barra lateral (simples ou com submenus). @see NavMenuItem */
+NavMenuItem, 
+/** Props do bloco de usuário logado na sidebar. @see NavUserSidebarProps */
+NavUserSidebarProps, 
+/** Props de uma tag individual usada nos cards (CardMedia, CardProfile, etc). @see CardTagsProps */
+CardTagsProps, 
+/** Props do CardMedia — card de mídia com imagem/vídeo, tags, rating. @see CardMediaProps */
+CardMediaProps, 
+/** Props do CardProfile — card de perfil de organização/guia. @see CardProfileProps */
+CardProfileProps, 
+/** Props do CardPromotion — card de promoção com preço antigo/novo e botão comprar. @see CardPromotionProps */
+CardPromotionProps, 
+/** Props do CardHighlight — card de destaque/organização com botão de ação. @see CardHighlightProps */
+CardHighlightProps, 
+/** Props do cabeçalho de carousel (título, descrição, botão "Ver tudo"). @see CarouselHeaderProps */
+CarouselHeaderProps, 
+/** Props do slot/container de carousel (botões navegação, plugins, bordas). @see CarouselSlotProps */
+CarouselSlotProps, 
+/** Item individual do CarouselBadge — categoria/opção com ícone/imagem. @see ItemCarousel */
+ItemCarousel, 
+/** Props do CarouselBadge — carousel de badges/categorias com orientação H/V. @see CarouselBadgeProps */
+CarouselBadgeProps, 
+/** Item individual do CarouselHero — slide com imagem, título e descrição. @see CarouselHeroItem */
+CarouselHeroItem, 
+/** Props do CarouselHero — carousel hero principal com menu sobreposto. @see CarouselHeroProps */
+CarouselHeroProps, 
+/** Props do CarouselGridMedia — layout em grid de cards de mídia (img/vídeo). @see CarouselGridMediaProps */
+CarouselGridMediaProps, 
+/** Props do CarouselGridProfile — grid de cards de perfil (guias, organizações). @see CarouselGridProfileProps */
+CarouselGridProfileProps, 
+/** Props do CarouselHighlights — carousel de cards de destaque/organizações. @see CarouselHighlightsProps */
+CarouselHighlightsProps, 
+/** Props do CarouselPromotion — carousel de cards de promoção com preços. @see CarouselPromotionProps */
+CarouselPromotionProps, 
+/** Props base do banner de anúncio (AdCardBanner). @see BannerProps */
+BannerProps, 
+/** Alias para BannerProps — props do componente AdCardBanner. @see AdCardBannerProps */
+AdCardBannerProps, 
+/** Props do CtaCardBanner — banner CTA "Vamos entrar em contacto" com 2 botões. @see CtaCardBannerProps */
+CtaCardBannerProps, 
+/** Props do NotificationBanner — banner de notificação com texto, CTA e dismiss. @see NotificationBannerProps */
+NotificationBannerProps, 
+/** Item básico de uma aba — valor identificador e label visível. @see TabItem */
+TabItem, 
+/** Props completas de uma aba no TabUnderline — item + conteúdo snippet. @see TabProps */
+TabProps, 
+/** Props do componente TabUnderline — abas com estilo underline. @see TabUnderlineProps */
+TabUnderlineProps, 
+/** Props base para o componente de input de busca. @see SearchItemProps */
+SearchItemProps, 
+/** Props do SearchInput — input de busca com 2 variantes visuais. @see SearchInputProps */
+SearchInputProps, 
+/** Item de link individual exibido numa coluna do footer. @see FooterLinkItem */
+FooterLinkItem, 
+/** Item de rede social do footer com ícone, texto e link. @see FooterSocialItem */
+FooterSocialItem, 
+/** Coluna do footer com título e lista de links. @see FooterColumnProps */
+FooterColumnProps, 
+/** Props do componente Footer — rodapé completo com colunas, redes sociais, newsletter. @see FooterProps */
+FooterProps, 
+/** Props do MenuBarSidebar — sidebar admin com menus, usuário e botões. @see MenuBarSidebarProps */
+MenuBarSidebarProps, 
+/** Definição completa de uma tabela de dados genérica (colunas, filtros, ações). @template T Tipo dos itens. @see DataTableItem */
+DataTableItem, 
+/** Alias de DataTableItem<T> — props do componente DataTableCore. @template T Tipo dos itens. @see DataTableCoreProps */
+DataTableCoreProps, 
+/** Props do AdminPanel — layout principal de administração com sidebar/header/conteúdo. @see AdminPanelProps */
+AdminPanelProps, 
+/** Props do AdminContent — wrapper de conteúdo para páginas admin. @see AdminContentProps */
+AdminContentProps, 
+/** Dados necessários para autenticação de um utilizador. @see LoginRequestDto */
 LoginRequestDto, 
-/** Tipo de formulário de login. @see AuthFormType */
+/** Tipo de formulário de login. @see LoginVariant */
 LoginVariant, 
 /** Configuração de link externo. @see LinkProps */
 LinkProps, 
@@ -27,4 +133,52 @@ PageResetPasswordProps,
 /** Dados necessários para verificação OTP. @see OtpVerificationRequestDto */
 OtpVerificationRequestDto, 
 /** Props do componente PageOtpVerification. @see PageOtpVerificationProps */
-PageOtpVerificationProps };
+PageOtpVerificationProps, 
+/** Variante do componente ProfileUser — 1 admin, 2 security, 3 experiência. @see ProfileUserVariant */
+ProfileUserVariant, 
+/** Morada de envio associada ao perfil do utilizador. @see ProfileUserAddress */
+ProfileUserAddress, 
+/** Nota/anotação associada ao perfil (admin). @see ProfileUserNote */
+ProfileUserNote, 
+/** Preferências individuais de notificação (email/web/app). @see ProfileUserNotificationPref */
+ProfileUserNotificationPref, 
+/** Preferência de marketing (newsletter, promoções) com toggles email/push. @see ProfileUserMarketingPref */
+ProfileUserMarketingPref, 
+/** Item de experiência profissional/curricular apresentado no perfil público. @see ProfileUserExperience */
+ProfileUserExperience, 
+/** Conjunto completo dos dados do utilizador apresentados no ProfileUser. @see ProfileUserData */
+ProfileUserData, 
+/** Props do componente ProfileUser — página de perfil com 3 variantes. @see ProfileUserProps */
+ProfileUserProps, 
+/** Props do NegoDesign — componente raiz do Negodesign. */
+NegoDesignProps, 
+/** Props base para inputs de formulário com label. */
+InputLabelProps, 
+/** Item individual do breadcrumb do ProductDetails. @see ProductDetailsBreadcrumbItem */
+ProductDetailsBreadcrumbItem, 
+/** Tag/badge associada ao ProductDetails. @see ProductDetailsTag */
+ProductDetailsTag, 
+/** Imagem da galeria do ProductDetails. @see ProductDetailsImage */
+ProductDetailsImage, 
+/** Informações de localização do ProductDetails. @see ProductDetailsLocation */
+ProductDetailsLocation, 
+/** Avaliação de um cliente sobre o ProductDetails. @see ProductDetailsReview */
+ProductDetailsReview, 
+/** Aba de conteúdo adicional do ProductDetails. @see ProductDetailsTab */
+ProductDetailsTab, 
+/** Dados completos apresentados na página ProductDetails. @see ProductDetailsData */
+ProductDetailsData, 
+/** Props do componente ProductDetails. @see ProductDetailsProps */
+ProductDetailsProps, 
+/** Item de breadcrumb do PrivacyPolicyOrTermsOfUse. @see BreadcrumbItem */
+BreadcrumbItem, 
+/** Bloco de conteúdo do PrivacyPolicyOrTermsOfUse. @see ContentBlock */
+ContentBlock, 
+/** Secção de conteúdo do PrivacyPolicyOrTermsOfUse. @see DocSection */
+DocSection, 
+/** Dados completos de PrivacyPolicyOrTermsOfUse. @see DocPageData */
+DocPageData, 
+/** Item da tabela de conteúdos (TOC). @see TocItem */
+TocItem, 
+/** Props do componente PrivacyPolicyOrTermsOfUse. @see PrivacyPolicyOrTermsOfUseProps */
+PrivacyPolicyOrTermsOfUseProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "negodesign",
-	"version": "0.0.30",
+	"version": "0.0.32",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [