negodesign 0.0.29 → 0.0.31

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;

package/dist/components/pages/product-details/shared/ProductDetailActions.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+  /**
+   * Ações do produto: botões de compra, favorito e carrinho.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailActions id={data.id} {onBuy} {onFavorite} {onCart} buttonBuyText="Comprar" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import {
+    HeartAddIcon,
+    HeartRemoveIcon,
+    ShoppingCartAdd01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let {
+    id,
+    buttonBuyText = "Comprar",
+    isFavorite = $bindable(false),
+    isCart = $bindable(false),
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: {
+    id: string | number;
+    buttonBuyText?: string;
+    isFavorite?: boolean;
+    isCart?: boolean;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex items-center gap-2">
+    <Skeleton class="h-9 min-w-40 flex-1 rounded-md" />
+    <Skeleton class="size-9 rounded-full" />
+    <Skeleton class="size-9 rounded-full" />
+  </div>
+{:else}
+  <div class="flex flex-wrap items-center gap-2">
+    <Button class="flex-1 min-w-40 bg-gradient" onclick={() => onBuy?.(id)}>
+      {buttonBuyText}
+    </Button>
+
+    <Button
+      size="icon"
+      class="rounded-full"
+      variant="outline"
+      aria-label={isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos"}
+      onclick={() => {
+        isFavorite = !isFavorite;
+        onFavorite?.(id);
+      }}
+    >
+      <HugeiconsIcon icon={isFavorite ? HeartRemoveIcon : HeartAddIcon} />
+    </Button>
+
+    <Button
+      size="icon"
+      class="rounded-full"
+      variant="outline"
+      aria-label="Adicionar ao carrinho"
+      onclick={() => {
+        isCart = !isCart;
+        onCart?.(id);
+      }}
+    >
+      <HugeiconsIcon icon={ShoppingCartAdd01Icon} />
+    </Button>
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    id: string | number;
+    buttonBuyText?: string;
+    isFavorite?: boolean;
+    isCart?: boolean;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+};
+declare const ProductDetailActions: import("svelte").Component<$$ComponentProps, {}, "isFavorite" | "isCart">;
+type ProductDetailActions = ReturnType<typeof ProductDetailActions>;
+export default ProductDetailActions;

package/dist/components/pages/product-details/shared/ProductDetailBreadcrumb.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+  /**
+   * Breadcrumb de navegação para a página de detalhes do produto.
+   * Quando `isLoading` é true, exibe um Skeleton.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailBreadcrumb items={[{ label: "Home", href: "/" }, { label: "Hotel Baía Azul" }]} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsBreadcrumbItem } from "../types";
+
+  let {
+    items,
+    isLoading = false,
+  }: {
+    items: ProductDetailsBreadcrumbItem[];
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="h-4 w-48 rounded-md" />
+{:else}
+  <nav
+    aria-label="Breadcrumb"
+    class="flex items-center gap-1.5 text-sm text-muted-foreground"
+  >
+    {#each items as item, i (item.label)}
+      {#if item.href}
+        <a href={item.href} class="hover:text-foreground transition-colors"
+          >{item.label}</a
+        >
+      {:else}
+        <span class="text-foreground font-medium">{item.label}</span>
+      {/if}
+      {#if i < items.length - 1}
+        <span class="select-none">/</span>
+      {/if}
+    {/each}
+  </nav>
+{/if}

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

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

package/dist/components/pages/product-details/shared/ProductDetailDescription.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  /**
+   * Descrição do produto (curta e longa opcional).
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailDescription description={data.description} longDescription={data.longDescription} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let {
+    description,
+    longDescription,
+    isLoading = false,
+  }: {
+    description: string;
+    longDescription?: string;
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-2">
+    {#each Array.from({ length: 3 }) as _, i (i)}
+      <Skeleton class="h-4 w-full rounded-md" />
+    {/each}
+  </div>
+{:else}
+  <p class="leading-7 text-foreground/90">{description}</p>
+  {#if longDescription}
+    <p class="leading-7 text-foreground/75">{longDescription}</p>
+  {/if}
+{/if}

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    description: string;
+    longDescription?: string;
+    isLoading?: boolean;
+};
+declare const ProductDetailDescription: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailDescription = ReturnType<typeof ProductDetailDescription>;
+export default ProductDetailDescription;

package/dist/components/pages/product-details/shared/ProductDetailFeatures.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  /**
+   * Bloco de características do produto (lista de bullets).
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailFeatures features={["Wi-Fi gratuito", "Pequeno-almoço incluído"]} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let {
+    features,
+    isLoading = false,
+  }: {
+    features: string[];
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-2">
+    {#each Array.from({ length: 3 }) as _, i (i)}
+      <Skeleton class="h-4 w-2/3 rounded-md" />
+    {/each}
+  </div>
+{:else}
+  <ul class="flex flex-col gap-2">
+    {#each features as feature, i (feature)}
+      <li class="flex items-start gap-2 text-sm text-foreground/90">
+        <span aria-hidden="true" class="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary"></span>
+        <span>{feature}</span>
+      </li>
+    {/each}
+  </ul>
+{/if}

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    features: string[];
+    isLoading?: boolean;
+};
+declare const ProductDetailFeatures: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailFeatures = ReturnType<typeof ProductDetailFeatures>;
+export default ProductDetailFeatures;