negodesign 0.0.30 → 0.0.31

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>

package/dist/components/pages/product-details/04/ProductDetails04.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 ProductDetails04: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetails04 = ReturnType<typeof ProductDetails04>;
+export default ProductDetails04;

package/dist/components/pages/product-details/ProductDetails.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  /**
+   * Página de detalhes do produto com seleção de layout.
+   * Permite escolher entre quatro variantes:
+   * - **1**: Duas colunas (galeria à esquerda, info à direita).
+   * - **2**: Galeria em destaque com conteúdo centralizado.
+   * - **3**: Painel de compra sticky no lado direito.
+   * - **4**: Abas de conteúdo (descrição e avaliações) abaixo da info.
+   *
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetails varient={1} data={productData} />
+   *
+   * <ProductDetails varient={3} data={productData} onBuy={(id) => console.log(id)} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { ProductDetailsProps } from "./types";
+  import ProductDetails01 from "./01/ProductDetails01.svelte";
+  import ProductDetails02 from "./02/ProductDetails02.svelte";
+  import ProductDetails03 from "./03/ProductDetails03.svelte";
+  import ProductDetails04 from "./04/ProductDetails04.svelte";
+
+  let { varient = 1, data, isLoading = false, onBuy, onFavorite, onCart }: ProductDetailsProps = $props();
+</script>
+
+{#if varient === 2}
+  <ProductDetails02 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{:else if varient === 3}
+  <ProductDetails03 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{:else if varient === 4}
+  <ProductDetails04 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{:else}
+  <ProductDetails01 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{/if}

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

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