negodesign 0.0.35 → 0.0.37

package/dist/components/pages/company-profile/shared/ProfileBanner.svelte

@@ -0,0 +1,270 @@
+<script lang="ts" module>
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  /**
+   * Banner de apresentação da empresa/fábrica: imagem de capa, logótipo,
+   * nome, país, botão de contacto e faixa de estatísticas rápidas.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProfileBanner data={data.banner} id={data.id} {onContact} {onCopyLink} {onShare} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { Button } from "../../../ui/button/index.js";
+  import ImgPlaceholder from "../../../../assets/placeholder-image.png";
+  import type { ProfileBannerData, ProfileBannerTag } from "../types";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { onDestroy } from "svelte";
+  import {
+    Calendar01FreeIcons,
+    Copy,
+    DashboardBrowsingIcon,
+    Email,
+    Link01FreeIcons,
+    MapPin,
+    Share,
+    WhatsappIcon,
+  } from "@hugeicons/core-free-icons";
+
+  const AUTOPLAY_MS = 8000;
+
+  let {
+    id,
+    data,
+    isLoading = false,
+    onWhatsapp,
+    onEmail,
+    onCopyLink,
+    onShare,
+    tags,
+  }: {
+    id: string | number;
+    data: ProfileBannerData;
+    isLoading?: boolean;
+    onWhatsapp?: (id: string | number) => void;
+    onEmail?: (id: string | number) => void;
+    onCopyLink?: (id: string | number) => void;
+    onShare?: (id: string | number) => void;
+    tags?: ProfileBannerTag[];
+  } = $props();
+
+  const cover = $derived(data?.coverImages ?? []);
+  const isCover = $derived(cover.length > 0);
+  const hasMultipleCovers = $derived(cover.length > 1);
+
+  // ---- Carrossel de imagens de capa ----
+  let activeIndex = $state(0);
+  let intervalId: ReturnType<typeof setInterval> | undefined;
+
+  function stopAutoplay() {
+    if (intervalId) clearInterval(intervalId);
+  }
+
+  function startAutoplay() {
+    stopAutoplay();
+    if (hasMultipleCovers) {
+      intervalId = setInterval(() => {
+        activeIndex = (activeIndex + 1) % cover.length;
+      }, AUTOPLAY_MS);
+    }
+  }
+
+  function goTo(index: number) {
+    activeIndex = index;
+    startAutoplay(); // reinicia o timer ao clicar manualmente
+  }
+
+  // Reinicia apenas quando o conjunto de imagens muda (não a cada render)
+  $effect(() => {
+    void cover.length; // dependência explícita
+    activeIndex = 0;
+    startAutoplay();
+    return stopAutoplay;
+  });
+
+  onDestroy(stopAutoplay);
+
+  // Ações do header (topo direito) — evita repetir markup de botão
+  const headerActions = $derived([
+    { icon: Copy, label: "Copiar link", onclick: () => onCopyLink?.(id) },
+    { icon: Share, label: "Partilhar", onclick: () => onShare?.(id) },
+  ]);
+
+  const contactActions = $derived([
+    {
+      icon: Email,
+      label: "Email",
+      iconClass: "text-red-500",
+      onclick: () => onEmail?.(id),
+    },
+    {
+      icon: WhatsappIcon,
+      label: "Whatsapp",
+      iconClass: "text-green-500",
+      onclick: () => onWhatsapp?.(id),
+    },
+  ]);
+
+  const infoItems = $derived([
+    {
+      title: "Categoria",
+      description: data.category,
+      icon: DashboardBrowsingIcon,
+    },
+    { title: "Endereço", description: data.address, icon: MapPin },
+    {
+      title: "Anos de Atuação",
+      description: data.yearFounded,
+      icon: Calendar01FreeIcons,
+    },
+    { title: "Website", description: data.website, icon: Link01FreeIcons },
+  ]);
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-4">
+    <Skeleton class="aspect-21/9 w-full rounded-xl" />
+    <div class="flex flex-col items-center gap-3">
+      <Skeleton class="size-24 rounded-2xl -mt-16 border-4 border-background" />
+      <Skeleton class="h-7 w-48 rounded-md" />
+      <Skeleton class="h-10 w-44 rounded-md" />
+    </div>
+    <div class="flex justify-center gap-6">
+      {#each Array.from({ length: 4 }) as _, i (i)}
+        <Skeleton class="h-12 w-24 rounded-md" />
+      {/each}
+    </div>
+  </div>
+{:else}
+  <div
+    class="flex flex-col items-center justify-center p-2 relative rounded-lg overflow-hidden
+    {isCover ? '' : 'bg-gradient'}"
+  >
+    {#if isCover}
+      <div class="absolute inset-0 -z-10">
+        {#each cover as image, i (image.src)}
+          <img
+            src={image.src}
+            alt={image.alt ?? ""}
+            class="absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out {i ===
+            activeIndex
+              ? 'opacity-100'
+              : 'opacity-0 pointer-events-none'}"
+          />
+        {/each}
+        <div class="absolute inset-0 bg-black/30"></div>
+
+        {#if hasMultipleCovers}
+          <div
+            class="absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-1.5"
+          >
+            {#each cover as _, i (i)}
+              <button
+                type="button"
+                aria-label={`Ir para imagem ${i + 1}`}
+                onclick={() => goTo(i)}
+                class="h-1.5 rounded-full transition-all {i === activeIndex
+                  ? 'w-4 bg-white'
+                  : 'w-1.5 bg-white/50'}"
+              ></button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="overflow-hidden rounded-xl absolute top-0 right-0">
+      <div class="flex gap-2 md:gap-5 p-4">
+        {#each headerActions as action (action.label)}
+          <Button
+            type="button"
+            variant="ghost"
+            class="rounded-full bg-white dark:bg-background"
+            aria-label={action.label}
+            onclick={action.onclick}
+          >
+            <HugeiconsIcon icon={action.icon} />
+          </Button>
+        {/each}
+      </div>
+    </div>
+
+    <div
+      class="flex flex-col items-center gap-3 px-4 text-center justify-center md:-mb-10"
+    >
+      <div class="flex shrink-0 items-center justify-center">
+        {#if data.logo}
+          <img
+            src={data.logo}
+            alt={data.name}
+            class="rounded-full w-15 md:w-25 h-15 md:h-25 lg:w-40 lg:h-40 p-2"
+            onerror={(e) =>
+              ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+          />
+        {:else}
+          <span class="text-2xl font-bold text-muted-foreground"
+            >{data.name?.[0] ?? "?"}</span
+          >
+        {/if}
+      </div>
+      <h1 class="text-lg font-bold tracking-tight md:text-xl mb-5 text-white">
+        {data.name}
+      </h1>
+    </div>
+
+    <div class="flex justify-between w-full p-5">
+      {#each contactActions as action (action.label)}
+        <Button
+          variant="ghost"
+          size="sm"
+          onclick={action.onclick}
+          class="bg-white cursor-pointer"
+        >
+          <HugeiconsIcon icon={action.icon} class={action.iconClass} />
+          {action.label}
+        </Button>
+      {/each}
+    </div>
+  </div>
+
+  <div
+    class="bg-gray-50 dark:bg-background p-2 md:p-10 flex flex-col items-center justify-center"
+  >
+    <div
+      class="grid grid-cols-2 items-center w-full
+         [&>*:nth-child(odd)]:border-r
+         [&>*:nth-child(-n+2)]:pb-1 [&>*:nth-child(-n+2)]:md:pb-2.5 [&>*:nth-child(-n+2)]:lg:pb-5
+         [&>*:nth-child(-n+2)]:border-b
+         [&>*:nth-child(n+3)]:pt-1 [&>*:nth-child(n+3)]:md:pt-2.5 [&>*:nth-child(n+3)]:lg:pt-5
+         *:border-border
+         *:w-full
+         *:flex *:flex-col *:items-center"
+    >
+      {#each infoItems as item (item.title)}
+        {@render companyInfo(item)}
+      {/each}
+    </div>
+  </div>
+{/if}
+
+{#snippet companyInfo({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description?: string;
+  icon: any;
+})}
+  <div class="flex flex-col gap-2 items-center">
+    <h3 class="text-md font-semibold flex gap-2 items-center">
+      <HugeiconsIcon {icon} size={15} />
+      {title}
+    </h3>
+    <p class="text-md text-gray-400">{description ?? "---"}</p>
+  </div>
+{/snippet}

package/dist/components/pages/company-profile/shared/ProfileBanner.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ProfileBannerData, ProfileBannerTag } from "../types";
+type $$ComponentProps = {
+    id: string | number;
+    data: ProfileBannerData;
+    isLoading?: boolean;
+    onWhatsapp?: (id: string | number) => void;
+    onEmail?: (id: string | number) => void;
+    onCopyLink?: (id: string | number) => void;
+    onShare?: (id: string | number) => void;
+    tags?: ProfileBannerTag[];
+};
+declare const ProfileBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileBanner = ReturnType<typeof ProfileBanner>;
+export default ProfileBanner;

package/dist/components/pages/company-profile/shared/ProfileGallery.svelte

@@ -0,0 +1,198 @@
+<script lang="ts" module>
+  /**
+   * Secção "Galeria": grelha de imagens/vídeos da empresa com lightbox simples.
+   * O vídeo (se existir) ocupa sempre o card em destaque.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProfileGallery data={data.gallery} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProfileGalleryData, ProfileImage } from "../types";
+  import ImgPlaceholder from "../../../../assets/placeholder-image.png";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { GalleryThumbnailsFreeIcons } from "@hugeicons/core-free-icons";
+
+  let {
+    data,
+    isLoading = false,
+    className,
+  }: {
+    data: ProfileGalleryData;
+    isLoading?: boolean;
+    className?: string;
+  } = $props();
+
+  // Vídeo primeiro (ocupa o card em destaque), resto mantém a ordem original.
+  const images = $derived(
+    [...(data?.images ?? [])].sort((a, b) =>
+      a.type === "video" ? -1 : b.type === "video" ? 1 : 0,
+    ),
+  );
+  const visible = $derived(images.slice(0, 5));
+
+  let index = $state<number | null>(null);
+  const active = $derived(index !== null ? images[index] : undefined);
+
+  const open = (i: number) => (index = i);
+  const close = () => (index = null);
+  const step = (dir: 1 | -1) => {
+    if (index === null || !images.length) return;
+    index = (index + dir + images.length) % images.length;
+  };
+  const onKeydown = (e: KeyboardEvent) => {
+    if (index === null) return;
+    if (e.key === "Escape") close();
+    else if (e.key === "ArrowRight") step(1);
+    else if (e.key === "ArrowLeft") step(-1);
+  };
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#snippet media(item: ProfileImage, cls: string)}
+  {#if item.type === "video"}
+    <video src={item.src} class={cls} muted playsinline preload="metadata"
+    ></video>
+    <span
+      class="absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30"
+    >
+      <span
+        class="flex size-11 items-center justify-center rounded-full bg-black/50 text-white"
+      >
+        <svg viewBox="0 0 24 24" class="size-5 fill-white" aria-hidden="true">
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      </span>
+    </span>
+  {:else}
+    <img
+      src={item.src}
+      alt={item.alt ?? ""}
+      class={cls}
+      loading="lazy"
+      decoding="async"
+      onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+    />
+  {/if}
+{/snippet}
+
+{#snippet arrow(dir: 1 | -1, side: string)}
+  <button
+    type="button"
+    aria-label={dir === -1 ? "Imagem anterior" : "Próxima imagem"}
+    onclick={() => step(dir)}
+    class="absolute {side} flex size-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
+  >
+    <svg
+      viewBox="0 0 24 24"
+      class="size-5"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d={dir === -1 ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"} />
+    </svg>
+  </button>
+{/snippet}
+
+<div class="bg-gray-50 dark:bg-background p-4 md:p-6 {className}">
+  <h2 class="mb-4 flex items-center gap-2 text-lg font-bold">
+    <HugeiconsIcon icon={GalleryThumbnailsFreeIcons} />
+    {data.title ?? "Galeria"}
+  </h2>
+
+  {#if isLoading}
+    <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
+      <Skeleton
+        class="col-span-2 row-span-2 aspect-square rounded-lg md:aspect-auto"
+      />
+      {#each Array.from({ length: 4 }) as _, i (i)}
+        <Skeleton class="aspect-square rounded-lg" />
+      {/each}
+    </div>
+  {:else if visible.length}
+    <div class="grid grid-cols-2 gap-3 md:grid-cols-3 md:auto-rows-36">
+      {#each visible as item, i (item.src)}
+        <button
+          type="button"
+          onclick={() => open(i)}
+          class="group relative overflow-hidden rounded-lg border {i === 0
+            ? 'col-span-2 row-span-2'
+            : ''}"
+          aria-label={item.alt ??
+            (item.type === "video"
+              ? "Reproduzir vídeo"
+              : `Ver imagem ${i + 1}`)}
+        >
+          {@render media(
+            item,
+            "size-full object-cover transition-transform duration-300 group-hover:scale-105",
+          )}
+        </button>
+      {/each}
+    </div>
+  {:else}
+    <p class="text-sm text-muted-foreground">
+      Galeria ainda não foi submetida.
+    </p>
+  {/if}
+</div>
+
+{#if active}
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+    role="dialog"
+    aria-modal="true"
+  >
+    <button
+      type="button"
+      aria-label="Fechar"
+      onclick={close}
+      class="absolute right-4 top-4 flex size-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        class="size-5"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+    </button>
+
+    {#if images.length > 1}
+      {@render arrow(-1, "left-2 md:left-6")}
+      {@render arrow(1, "right-2 md:right-6")}
+    {/if}
+
+    {#if active.type === "video"}
+      <!-- svelte-ignore a11y_media_has_caption -->
+      <video
+        src={active.src}
+        class="max-h-[85vh] max-w-full rounded-lg object-contain"
+        controls
+        autoplay
+        playsinline
+      ></video>
+    {:else}
+      <img
+        src={active.src}
+        alt={active.alt ?? ""}
+        class="max-h-[85vh] max-w-full rounded-lg object-contain"
+        onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+      />
+    {/if}
+  </div>
+{/if}

package/dist/components/pages/company-profile/shared/ProfileGallery.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ProfileGalleryData } from "../types";
+type $$ComponentProps = {
+    data: ProfileGalleryData;
+    isLoading?: boolean;
+    className?: string;
+};
+declare const ProfileGallery: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileGallery = ReturnType<typeof ProfileGallery>;
+export default ProfileGallery;

package/dist/components/pages/company-profile/shared/ProfileMenuBadge.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+  /**
+   * Menu de navegação entre secções do perfil em formato de badges,
+   * usado em mobile no lugar da `ProfileSidebar`. Clicar num badge
+   * desloca a página até à secção correspondente.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProfileMenuBadge items={sections} active={activeSection} onSelect={scrollToSection} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProfileNavItem } from "../types";
+
+  let {
+    items,
+    active,
+    isLoading = false,
+    onSelect,
+    className,
+  }: {
+    items: ProfileNavItem[];
+    active?: string;
+    isLoading?: boolean;
+    onSelect?: (id: string) => void;
+    className?: string;
+  } = $props();
+</script>
+
+<div
+  class="sticky top-0 z-10 -mx-4 flex gap-2 overflow-x-auto border-b bg-background/95 px-4 py-3 no-scrollbar backdrop-blur {className ?? ''}"
+>
+  {#if isLoading}
+    {#each Array.from({ length: 3 }) as _, i (i)}
+      <Skeleton class="h-8 w-28 shrink-0 rounded-full" />
+    {/each}
+  {:else}
+    {#each items as item (item.id)}
+      <button
+        type="button"
+        onclick={() => onSelect?.(item.id)}
+        aria-current={active === item.id ? "true" : undefined}
+        class="shrink-0 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm font-medium transition-colors {active ===
+        item.id
+          ? 'border-transparent bg-gradient text-white'
+          : 'border-border text-muted-foreground hover:text-foreground'}"
+      >
+        {item.label}
+      </button>
+    {/each}
+  {/if}
+</div>

package/dist/components/pages/company-profile/shared/ProfileMenuBadge.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProfileNavItem } from "../types";
+type $$ComponentProps = {
+    items: ProfileNavItem[];
+    active?: string;
+    isLoading?: boolean;
+    onSelect?: (id: string) => void;
+    className?: string;
+};
+declare const ProfileMenuBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileMenuBadge = ReturnType<typeof ProfileMenuBadge>;
+export default ProfileMenuBadge;

package/dist/components/pages/company-profile/shared/ProfileProducts.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+  /**
+   * Secção "Produtos": exibe a lista de produtos/serviços da empresa
+   * utilizando o componente CarouselGridProduct.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProfileProducts data={data.products} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import CarouselGridProduct from "../../../core/carousel/grid/product/ui/CarouselGridProduct.svelte";
+  import type { ProfileProductsData } from "../types";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { PackageIcon } from "@hugeicons/core-free-icons";
+  import NotFoundEmpty from "../../../core/panel/NotFoundEmpty.svelte";
+
+  let {
+    data,
+    isLoading = false,
+    className = "",
+  }: {
+    data?: ProfileProductsData;
+    isLoading?: boolean;
+    className?: string;
+  } = $props();
+
+  const items = $derived(data?.items ?? []);
+  const loading = $derived(isLoading || Boolean(data?.isLoading));
+  const variant = $derived(data?.variant ?? data?.varient ?? 1);
+</script>
+
+<div class="bg-gray-50 dark:bg-background p-4 md:p-6 rounded-lg {className}">
+  <h2 class="mb-4 flex items-center gap-2 text-lg font-bold">
+    <HugeiconsIcon icon={PackageIcon} class="size-5" />
+    {data?.title ?? "Produtos"}
+  </h2>
+
+  {#if !loading && items.length === 0}
+    <NotFoundEmpty />
+  {:else}
+    <CarouselGridProduct
+      {items}
+      {variant}
+      isLoading={loading}
+      headerProps={{
+        title: "",
+        description: data?.description,
+        containerClass: "p-0 bg-transparent",
+      }}
+      slotProps={{
+        buttonPreviousAndNextClass:
+          "bg-white dark:bg-gray-800 shadow-md hover:bg-gray-100 dark:hover:bg-gray-700",
+        positionButtonPreviousAndNext: "center",
+      }}
+      gridClass="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+    />
+  {/if}
+</div>

package/dist/components/pages/company-profile/shared/ProfileProducts.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ProfileProductsData } from "../types";
+type $$ComponentProps = {
+    data?: ProfileProductsData;
+    isLoading?: boolean;
+    className?: string;
+};
+declare const ProfileProducts: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileProducts = ReturnType<typeof ProfileProducts>;
+export default ProfileProducts;

package/dist/components/pages/company-profile/shared/ProfileSidebar.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  /**
+   * Barra lateral de navegação entre secções do perfil da empresa.
+   * Visível apenas em ecrãs médios/grandes — em mobile usar `ProfileMenuBadge`.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProfileSidebar items={sections} active={activeSection} onSelect={scrollToSection} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProfileNavItem } from "../types";
+
+  let {
+    items,
+    active,
+    isLoading = false,
+    onSelect,
+    className,
+  }: {
+    items: ProfileNavItem[];
+    active?: string;
+    isLoading?: boolean;
+    onSelect?: (id: string) => void;
+    className?: string;
+  } = $props();
+</script>
+
+<nav aria-label="Navegação do perfil" class="w-40 shrink-0 {className ?? ''}">
+  <div
+    class="fixed flex flex-col gap-1 md:pt-10 lg:pt-20 md:gap-2 bg-card p-6 md:p-8 h-screen border-r"
+  >
+    {#if isLoading}
+      {#each Array.from({ length: 4 }) as _, i (i)}
+        <Skeleton class="h-9 w-full rounded-md" />
+      {/each}
+    {:else}
+      {#each items as item (item.id)}
+        <button
+          type="button"
+          onclick={() => onSelect?.(item.id)}
+          aria-current={active === item.id ? "true" : undefined}
+          class="flex items-center gap-2 rounded-sm px-3 py-2 text-left text-sm font-medium transition-colors {active ===
+          item.id
+            ? 'bg-blue-100'
+            : 'text-muted-foreground hover:bg-muted hover:text-foreground'}"
+        >
+          {item.label}
+        </button>
+      {/each}
+    {/if}
+  </div>
+</nav>