negodesign 0.0.29 → 0.0.31

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

@@ -1,82 +1,179 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Props de uma tag individual usada nos cards.
+ * Usada em CardMedia, CardProfile, CardPromotion e CardHighlight.
+ */
 export interface CardTagsProps {
+    /** Ícone opcional exibido antes do texto da tag */
     icon?: IconSvgElement;
+    /** Texto exibido na tag */
     text: string;
 }
+/**
+ * Props do CardMedia — card de mídia com imagem ou vídeo,
+ * tags, rating, botões de perfil e detalhes.
+ */
 export interface CardMediaProps {
+    /** Identificador único do item */
     id: string | number;
+    /** URL do logotipo da empresa/organização */
     logo?: string;
+    /** Título do card (nome do produto, serviço, etc.) */
     title?: string;
+    /** Descrição/conteúdo do card */
     content?: string;
+    /** Valor máximo da classificação por estrelas (ex: 5) */
     startMax?: number;
+    /** URL da imagem de capa */
     imageUrl?: string;
+    /** URL do vídeo (substitui a imagem quando fornecido) */
     videoUrl?: string;
+    /** Classe CSS adicional para o container */
     className?: string;
+    /** Lista de tags exibidas no card */
     tags?: CardTagsProps[];
+    /** Indica se o item está marcado como favorito */
     isFavorite?: boolean;
+    /** Indica estado de carregamento (skeleton) */
     isLoading?: boolean;
+    /** Valor atual da classificação por estrelas (ex: 4.5) */
     startNumber?: number;
+    /** Exibe borda inferior nas tags */
     isTagBorderBottom?: boolean;
+    /** Classe CSS personalizada para o botão de perfil */
     buttonProfileClass?: string;
+    /** Classe CSS personalizada para o botão de detalhes */
     buttonDetailsClass?: string;
+    /** Exibe o botão de maximizar no vídeo */
     isVideoButtonMaximized?: boolean;
+    /** Exibe o botão de maximizar na imagem */
     isImageButtonMaximized?: boolean;
+    /** Callback acionado ao clicar no botão de favorito */
     onFavoriteClick?: (id: string | number) => void;
+    /** Callback acionado ao clicar no botão de perfil */
     onButtonProfile?: (id: string | number) => void;
+    /** Callback acionado ao clicar no botão de detalhes */
     onButtonDetails?: (id: string | number) => void;
+    /** Comportamento do vídeo: iniciar reprodução automática ou no hover */
     videoAction?: 'START_REPRODUCTION' | 'HOVER_REPRODUCTION';
 }
+/**
+ * Props do CardProfile — card de perfil de organização/guia
+ * com logo, descrição, tags, rating e botões.
+ */
 export interface CardProfileProps {
+    /** Identificador único do perfil */
     id: string | number;
+    /** URL do logotipo/avatar */
     logo?: string;
+    /** Nome/título do perfil */
     title?: string;
+    /** Descrição do perfil */
     content?: string;
+    /** Valor máximo da classificação por estrelas */
     startMax?: number;
+    /** Classe CSS adicional */
     className?: string;
+    /** Lista de tags do perfil */
     tags?: CardTagsProps[];
+    /** Indica se está marcado como favorito */
     isFavorite?: boolean;
+    /** Valor da classificação por estrelas */
     startNumber?: number;
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    /** Exibe borda inferior nas tags */
     isTagBorderBottom?: boolean;
+    /** Classe CSS personalizada para botão de perfil */
     buttonProfileClass?: string;
+    /** Classe CSS personalizada para botão de detalhes */
     buttonDetailsClass?: string;
+    /** Callback ao clicar no botão favorito */
     onFavoriteClick?: (id: string | number) => void;
+    /** Callback ao clicar no botão perfil */
     onButtonProfile?: (id: string | number) => void;
+    /** Callback ao clicar no botão detalhes */
     onButtonDetails?: (id: string | number) => void;
 }
+/**
+ * Props do CardPromotion — card de promoção com preço antigo/novo,
+ * botão de comprar, favoritar e adicionar ao carrinho.
+ */
 export interface CardPromotionProps {
+    /** Identificador único da promoção */
     id: string | number;
+    /** URL do logotipo */
     logo?: string;
+    /** URL da imagem do produto em promoção */
     imageUrl?: string;
+    /** Nome/título da promoção */
     title?: string;
+    /** Descrição da promoção */
     content?: string;
+    /** Classe CSS adicional */
     className?: string;
+    /** Indica se o botão de carrinho está ativo */
     isCart?: boolean;
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    /** Indica se está marcado como favorito */
     isFavorite?: boolean;
+    /** Lista de tags */
     tags?: CardTagsProps[];
+    /** Preço original (antes do desconto) */
     oldPrice?: string | number;
+    /** Preço promocional */
     newPrice?: string | number;
+    /** Texto do botão de compra (padrão: "Comprar") */
     buttonBuyText?: string;
+    /** Classe CSS personalizada para o botão comprar */
+    buttonBuyClass?: string;
+    /** Exibe ícone antes da descrição */
     isDescriptionIcon?: boolean;
+    /** Exibe etiqueta (label) na descrição */
     isDescriptionLabel?: boolean;
+    /** Callback ao clicar no botão comprar */
     onClickBuy?: (id: string | number) => void;
+    /** Callback ao clicar no botão carrinho */
     onClickShop?: (id: string | number) => void;
+    /** Callback ao clicar no botão favorito */
     onClickFavorite?: (id: string | number) => void;
 }
+/**
+ * Props do CardHighlight — card de destaque/organização
+ * com imagem, logo, botão de ação expandida.
+ */
 export interface CardHighlightProps {
+    /** Identificador único do destaque */
     id: string | number;
+    /** URL do logotipo */
     logo?: string;
+    /** URL da imagem de destaque */
     imageUrl?: string;
+    /** Título/nome do destaque */
     title?: string;
+    /** Classe CSS adicional */
     className?: string;
+    /** Indica se está marcado como favorito */
     isFavorite?: boolean;
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    /** Exibe botão expandir/ver mais */
+    isExpandButton?: boolean;
+    /** Descrição do destaque */
     content?: string;
+    /** Texto do botão de ação principal */
     buttonText?: string;
+    /** Classe CSS personalizada para o botão */
+    buttonClass?: string;
+    /** Exibe ícone antes da descrição */
     isDescriptionIcon?: boolean;
+    /** Exibe etiqueta (label) na descrição */
     isDescriptionLabel?: boolean;
+    /** Lista de tags */
     tags?: CardTagsProps[];
+    /** Callback ao clicar no botão favorito */
     onClickFavorite?: (id: string | number) => void;
+    /** Callback ao clicar no botão principal */
     onClickBtn?: (id: string | number) => void;
 }

package/dist/components/core/carousel/grid/media/types.d.ts

@@ -1,10 +1,21 @@
 import type { CardMediaProps } from "../../../card/types";
 import type { CarouselSlotProps } from "../../../panel/type";
 import type { CarouselHeaderProps } from "../../types";
+/**
+ * Props do CarouselGridMedia — layout em grid de cards de mídia
+ * (imagens/vídeos). Em telas mobile o grid vira carousel com swipe.
+ */
 export interface CarouselMediaProps {
+    /** Props do cabeçalho do carousel (título, descrição, etc.) */
     headerProps?: CarouselHeaderProps;
+    /** Props do slot/container do carousel (botões navegação, plugins) */
     slotProps?: CarouselSlotProps;
+    /** Classe CSS adicional para o container do grid */
+    gridClass?: string;
+    /** Variante visual do card: 1 ou 2 */
     variant?: 1 | 2;
+    /** Lista de itens de mídia para exibir nos cards */
     items: CardMediaProps[];
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
 }

package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte

@@ -9,6 +9,7 @@
   const {
     headerProps,
     slotProps,
+    gridClass,
     items,
     variant,
     isLoading = false,
@@ -18,7 +19,7 @@
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot {slotProps} totalItems={items.length}>
+  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
     {#if isLoading}
       {#each Array.from( { length: responsive.isMobile ? 5 : 9 }, ) as _, i (`loading-${i}`)}
         {#if responsive.isMobile}

package/dist/components/core/carousel/grid/profile/types.d.ts

@@ -1,10 +1,21 @@
 import type { CardProfileProps } from "../../../card/types";
 import type { CarouselSlotProps } from "../../../panel/type";
 import type { CarouselHeaderProps } from "../../types";
+/**
+ * Props do CarouselGridProfile — layout em grid de cards de perfil
+ * (guias, intérpretes, organizações). Em mobile vira carousel com swipe.
+ */
 export interface CarouselProfileProps {
+    /** Props do cabeçalho do carousel (título, descrição, etc.) */
     headerProps?: CarouselHeaderProps;
+    /** Props do slot/container do carousel (botões navegação, plugins) */
     slotProps?: CarouselSlotProps;
+    /** Classe CSS adicional para o container do grid */
+    gridClass?: string;
+    /** Variante visual do card: 1 ou 2 */
     variant?: 1 | 2;
+    /** Lista de perfis para exibir nos cards */
     items: CardProfileProps[];
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
 }

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -9,6 +9,7 @@
   const {
     headerProps,
     slotProps,
+    gridClass,
     items,
     variant,
     isLoading = false,
@@ -18,12 +19,9 @@
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot
-    {slotProps}
-    totalItems={items.length}
-  >
+  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
     {#if isLoading}
-      {#each Array.from({ length: responsive.isMobile ? 5 : 9 }) as _, i (`loading-${i}`)}
+      {#each Array.from( { length: responsive.isMobile ? 5 : 9 }, ) as _, i (`loading-${i}`)}
         {#if responsive.isMobile}
           <Carousel.Item class="pl-2 basis-auto">
             <CardProfile id={i} {variant} isLoading />

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -8,20 +8,15 @@
   type Props = {
     slotProps?: CarouselSlotProps;
     totalItems: number;
+    gridClass?: string;
     children: Snippet;
   };
 
-  const {
-    slotProps,
-    totalItems,
-    children,
-  }: Props = $props();
+  const { slotProps, totalItems, gridClass, children }: Props = $props();
 
   const responsive = useDevice();
 
-  const colsClass = $derived(
-    totalItems <= 4 ? "grid-cols-2" : "grid-cols-3"
-  );
+  const colsClass = $derived(totalItems <= 2 ? "grid-cols-2" : "grid-cols-3");
 </script>
 
 {#if responsive.isMobile}
@@ -32,7 +27,7 @@
     {@render children()}
   </CarouselSlot>
 {:else}
-  <div class="grid {colsClass} gap-4 p-2">
+  <div class="grid {colsClass} gap-4 p-2 {gridClass}">
     {@render children()}
   </div>
 {/if}

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte.d.ts

@@ -3,6 +3,7 @@ import type { CarouselSlotProps } from "../../../../panel/type";
 type Props = {
     slotProps?: CarouselSlotProps;
     totalItems: number;
+    gridClass?: string;
     children: Snippet;
 };
 declare const CarouselGridSlot: import("svelte").Component<Props, {}, "">;

package/dist/components/core/carousel/highlights/types.d.ts

@@ -1,12 +1,23 @@
 import type { CardHighlightProps } from "../../card/types";
 import type { CarouselSlotProps } from "../../panel/type";
 import type { CarouselHeaderProps } from "../types";
+/**
+ * Props do CarouselHighlights — carousel de cards de destaque
+ * (organizações, serviços em evidência).
+ */
 export interface CarouselHighlightsProps {
+    /** Props do cabeçalho do carousel (título, descrição, etc.) */
     headerProps?: CarouselHeaderProps;
+    /** Props do slot/container do carousel (botões navegação, plugins) */
     slotProps?: CarouselSlotProps;
+    /** Lista de itens de destaque */
     items: CardHighlightProps[];
+    /** Variante visual do card: 1 ou 2 */
     varient?: 1 | 2;
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    /** Exibe ícone antes da descrição do card */
     isDescriptionIcon?: boolean;
+    /** Exibe etiqueta (label) na descrição do card */
     isDescriptionLabel?: boolean;
 }

package/dist/components/core/carousel/promotion/types.d.ts

@@ -1,11 +1,21 @@
 import type { CardPromotionProps } from "../../card/types";
 import type { CarouselSlotProps } from "../../panel/type";
 import type { CarouselHeaderProps } from "../types";
+/**
+ * Props do CarouselPromotion — carousel de cards de promoção
+ * com preços antigo/novo e botões de compra.
+ */
 export interface CarouselPromotionProps {
+    /** Props do cabeçalho do carousel (título, descrição, etc.) */
     headerProps?: CarouselHeaderProps;
+    /** Props do slot/container do carousel (botões navegação, plugins) */
     slotProps?: CarouselSlotProps;
+    /** Lista de promoções para exibir */
     items: CardPromotionProps[];
+    /** Exibe ícone antes da descrição do card */
     isDescriptionIcon?: boolean;
+    /** Exibe etiqueta (label) na descrição do card */
     isDescriptionLabel?: boolean;
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
 }

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

@@ -1,48 +1,104 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
 import type { NavMenuProps } from "../nav/data/nav-menu";
+/**
+ * Item individual do CarouselBadge — categoria/opção com ícone,
+ * imagem, label e callback de clique.
+ */
 export interface ItemCarousel {
+    /** Valor único do item (usado para identificar seleção) */
     value: string;
+    /** Texto exibido no item */
     label: string;
+    /** URL da imagem opcional do item */
     image?: string;
+    /** URL de navegação opcional */
     link?: string;
+    /** Ícone SVG opcional do item */
     icon?: IconSvgElement | string;
+    /** Indica se o item está ativo/selecionado */
     isActive?: boolean;
+    /** Callback acionado ao clicar no item */
     onClick?: (value: string) => void;
 }
+/**
+ * Props do CarouselHeader — cabeçalho de carousel com título,
+ * descrição e botão "Ver tudo".
+ */
 export interface CarouselHeaderProps {
+    /** Título do carousel */
     title?: string;
+    /** Descrição/subtítulo abaixo do título */
     description?: string;
+    /** Classe CSS personalizada para o título */
     titleClass?: string;
+    /** Classe CSS personalizada para a descrição */
     descriptionClass?: string;
+    /** Classe CSS adicional para o container do header */
     containerClass?: string;
+    /** Callback ao clicar no botão "Ver tudo" */
     onButtonViewAll?: () => void;
+    /** Posição dos botões anterior/próximo */
     positionButtonPreviousAndNext?: "center" | "top_right";
+    /** Exibe borda inferior no header */
     isBorder?: boolean;
 }
+/**
+ * Props do CarouselBadge — carousel de badges/categorias
+ * com orientação horizontal ou vertical.
+ */
 export interface CarouselBadgeProps {
+    /** Lista de itens do carousel de badges */
     items: ItemCarousel[];
+    /** Orientação do layout: horizontal (padrão) ou vertical */
     orientation?: "horizontal" | "vertical";
+    /** Classe CSS personalizada para a imagem */
     imageClass?: string;
+    /** Classe CSS personalizada para o ícone */
     iconClass?: string;
+    /** Classe CSS personalizada para o label */
     labelClass?: string;
+    /** Classe CSS personalizada para o estado ativo */
     activeClass?: string;
+    /** Valor do item ativo por padrão */
     valueActive?: string;
+    /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    /** Exibe borda em cada item */
     isBorderItem?: boolean;
+    /** Exibe borda inferior no container */
     isBorderBottom?: boolean;
+    /** Classe CSS adicional para cada item do carousel */
     itemCarouselClass?: string;
+    /** Exibe botões anterior/próximo */
     isButtonPreviousAndNext?: boolean;
+    /** Classe CSS personalizada para botões anterior/próximo */
     buttonPreviousAndNextClass?: string;
 }
+/**
+ * Item individual do CarouselHero — slide com imagem,
+ * título e descrição.
+ */
 export interface CarouselHeroItem {
+    /** Título do slide hero */
     title: string;
+    /** URL da imagem de fundo do slide */
     image: string;
+    /** Descrição do slide */
     description: string;
 }
+/**
+ * Props do CarouselHero — carousel hero principal (ex: página de login)
+ * com slides em fullscreen e menu de navegação sobreposto.
+ */
 export interface CarouselHeroProps {
+    /** Lista de slides do hero */
     items: CarouselHeroItem[];
+    /** Configuração do menu de navegação sobreposto */
     navMenu: NavMenuProps;
+    /** Classe CSS adicional para o container */
     className?: string;
+    /** Classe CSS personalizada para o título */
     titleClass?: string;
+    /** Classe CSS personalizada para a descrição */
     descriptionClass?: string;
 }

package/dist/components/core/datatable/data/data-table.d.ts

@@ -1,19 +1,44 @@
 import type { CellContext, HeaderContext } from "@tanstack/table-core";
 import type { Component } from "svelte";
+/**
+ * Definição completa de uma tabela de dados genérica.
+ * Usada pelo DataTableCore para renderizar colunas, cabeçalhos,
+ * células, badges, ações por linha e filtros.
+ *
+ * @template T Tipo genérico dos itens/linhas da tabela.
+ */
 export interface DataTableItem<T = unknown> {
+    /** Definição das colunas da tabela */
     config: {
+        /** Chave de acesso ao valor na linha (ex: "name", "email") */
         accessorKey: string;
+        /** Cabeçalho da coluna: string estática ou função que renderiza componente customizado */
         header: string | ((context: HeaderContext<T, unknown>) => any);
+        /** Conteúdo da célula: string (valor simples) ou função que renderiza componente customizado */
         cell: string | ((context: CellContext<T, unknown>) => any);
+        /** Habilita/desabilita ordenação nesta coluna */
         enableSorting?: boolean;
+        /** Habilita/desabilita ocultação da coluna */
         enableHiding?: boolean;
+        /** Configuração opcional de badges (etiquetas coloridas) renderizadas na célula */
         badge?: {
+            /** Classe CSS adicional para o badge */
             className?: string;
+            /** Valor que ativa este badge (comparado com o valor da célula) */
             value: string;
+            /** Label exibida no badge (se omitido, usa o próprio valor) */
             label?: string;
         }[];
     }[];
+    /** Chave da coluna usada para o filtro de pesquisa global/list filter */
     columnFilter?: keyof T & string;
+    /** Componente Svelte renderizado na coluna de ações de cada linha */
     actions?: Component<any>;
+    /** Array de itens/linhas para popular a tabela */
     items?: T[];
 }
+/**
+ * Alias de DataTableItem<T> — props do componente DataTableCore.
+ * @template T Tipo genérico dos itens/linhas.
+ */
+export type DataTableCoreProps<T = unknown> = DataTableItem<T>;

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

@@ -0,0 +1,51 @@
+/**
+ * Item de link individual exibido numa coluna do footer.
+ */
+export interface FooterLinkItem {
+    /** Texto exibido no link */
+    text: string;
+    /** URL de destino (href) */
+    href?: string;
+}
+/**
+ * Item de rede social do footer com ícone, texto e link.
+ */
+export interface FooterSocialItem {
+    /** Ícone da rede social — nome do ícone pré-definido */
+    icon: "facebook" | "instagram" | "x" | "github" | "youtube" | "linkedin";
+    /** Texto usado como aria-label / tooltip */
+    text: string;
+    /** URL do perfil/rede social */
+    href?: string;
+}
+/**
+ * Coluna do footer com título e lista de links.
+ */
+export interface FooterColumnProps {
+    /** Título da coluna (ex: "Empresa", "Recursos") */
+    title: string;
+    /** Lista de links dentro da coluna */
+    items: FooterLinkItem[];
+}
+/**
+ * Props do componente Footer — rodapé completo com múltiplas colunas,
+ * logo, newsletter opcional e ícones de redes sociais.
+ */
+export interface FooterProps {
+    /** Lista de colunas de navegação do rodapé */
+    items: FooterColumnProps[];
+    /** URL do logotipo da empresa */
+    logo?: string;
+    /** Habilita/desabilita o formulário de newsletter */
+    isNewsletter?: boolean;
+    /** Lista de ícones das redes sociais */
+    socialsMedia: FooterSocialItem[];
+    /** Nome da empresa (exibido no copyright e newsletter) */
+    companyName?: string;
+    /** Título da seção de newsletter */
+    newsletterTitle?: string;
+    /** Descrição/texto auxiliar da newsletter */
+    newsletterDescription?: string;
+    /** Callback acionado ao submeter o email da newsletter */
+    onSubscribe?: (email: string) => void;
+}

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

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

package/dist/components/core/footer/ui/01/Footer01.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { t } from "../../../../../i18n";
+  import type { FooterProps } from "../../types";
+  import FooterColumn from "../shared/FooterColumn.svelte";
+  import FooterNewsLetter from "../shared/FooterNewsLetter.svelte";
+  import SocialIcon from "../shared/FooterSocialIcon.svelte";
+
+  let {
+    items,
+    logo,
+    isNewsletter = false,
+    socialsMedia,
+    companyName,
+    newsletterTitle,
+    newsletterDescription,
+    onSubscribe,
+  }: FooterProps = $props();
+
+  let email = $state("");
+  const year = new Date().getFullYear();
+
+  function handleSubscribe(e: SubmitEvent) {
+    e.preventDefault();
+    const value = email.trim();
+    if (!value) return;
+    onSubscribe?.(value);
+    email = "";
+  }
+</script>
+
+<footer class="p-10">
+  <div
+    class="flex flex-col gap-10 md:flex-row md:items-start md:justify-between"
+  >
+    <div class="shrink-0">
+      {#if logo}
+        <img src={logo} alt="" class="h-10 w-auto" />
+      {/if}
+    </div>
+
+    <div class="flex flex-1 flex-wrap justify-between gap-10">
+      {#each items as column, i (i)}
+        <FooterColumn title={column.title} items={column.items} />
+      {/each}
+    </div>
+  </div>
+
+  {#if isNewsletter}
+    <div
+      class="mt-10 flex flex-col gap-4 border-t border-gray/10 pt-8 md:flex-row md:items-center md:justify-between"
+    >
+      <FooterNewsLetter
+        {isNewsletter}
+        {newsletterTitle}
+        {newsletterDescription}
+        {onSubscribe}
+      />
+    </div>
+  {/if}
+
+  <div
+    class="mt-10 flex flex-col gap-4 border-t border-gray/10 pt-6 md:flex-row md:items-center md:justify-between"
+  >
+    <p class="text-sm">
+      ©
+      {year}
+      {companyName}
+      {$t("footer.copyr")}
+    </p>
+    <div class="flex items-center gap-4">
+      {#each socialsMedia as social, i (i)}
+        <SocialIcon {...social} />
+      {/each}
+    </div>
+  </div>
+</footer>

package/dist/components/core/footer/ui/01/Footer01.svelte.d.ts

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