negodesign 0.0.35 → 0.0.36

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

@@ -0,0 +1,194 @@
+<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 {
+    Calendar01FreeIcons,
+    Copy,
+    DashboardBrowsingIcon,
+    Email,
+    Link01FreeIcons,
+    MapPin,
+    Share,
+    WhatsappIcon,
+  } from "@hugeicons/core-free-icons";
+
+  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 ?? []);
+</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 bg-gradient p-2 relative rounded-lg"
+  >
+    <!-- Capa -->
+    <div class="overflow-hidden rounded-xl absolute top-0 right-0">
+      <div class="flex gap-2 md:gap-5 p-4">
+        <Button
+          type="button"
+          variant="ghost"
+          class="rounded-full bg-white dark:bg-background"
+          aria-label="Copiar link"
+          onclick={() => onCopyLink?.(id)}
+        >
+          <HugeiconsIcon icon={Copy} />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          class="rounded-full bg-white dark:bg-background"
+          aria-label="Partilhar"
+          onclick={() => onShare?.(id)}
+        >
+          <HugeiconsIcon icon={Share} />
+        </Button>
+      </div>
+    </div>
+
+    <!-- Logótipo + nome + contacto -->
+    <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 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">
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={() => onEmail?.(id)}
+        class="bg-white cursor-pointer"
+      >
+        <HugeiconsIcon icon={Email} class="text-red-500" />
+        Email
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={() => onWhatsapp?.(id)}
+        class="bg-white cursor-pointer"
+      >
+        <HugeiconsIcon icon={WhatsappIcon} class="text-green-500" />
+        Whatsapp
+      </Button>
+    </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"
+    >
+      {@render companyInfo({
+        title: "Categoria",
+        description: data.category,
+        icon: DashboardBrowsingIcon,
+      })}
+      {@render companyInfo({
+        title: "Endereço",
+        description: data.address,
+        icon: MapPin,
+      })}
+      {@render companyInfo({
+        title: "Anos de Atuação",
+        description: data.yearFounded,
+        icon: Calendar01FreeIcons,
+      })}
+      {@render companyInfo({
+        title: "Website",
+        description: data.website,
+        icon: Link01FreeIcons,
+      })}
+    </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/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: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>

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

package/dist/components/pages/company-profile/types.d.ts

@@ -0,0 +1,117 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Item de estatística exibido na faixa de dados do banner
+ * (ex: "Setor de atuação", "Anos de Atuação", "Localização").
+ */
+export interface ProfileStatItem {
+    /** Rótulo da estatística (ex: "Setor de atuação"). */
+    label: string;
+    /** Valor exibido (ex: "Papel", "8", "Benguela"). */
+    value: string;
+}
+/**
+ * Imagem usada na galeria ou na capa do perfil.
+ */
+export interface ProfileImage {
+    /** Caminho ou URL completa da imagem (obrigatório). */
+    src: string;
+    /** Texto alternativo para acessibilidade. */
+    alt?: string;
+    type?: "image" | "video";
+}
+/**
+ * Item de navegação usado pela Sidebar e pelo menu de badges (mobile).
+ * O `id` deve corresponder ao `id` da secção (elemento âncora) na página.
+ */
+export interface ProfileNavItem {
+    /** Identificador único da secção (usado como âncora de scroll). */
+    id: string;
+    /** Rótulo visível do item de navegação. */
+    label: string;
+}
+/**
+ * Dados do banner/apresentação da empresa: capa, logótipo, nome,
+ * país, botão de contacto e faixa de estatísticas.
+ */
+export interface ProfileBannerData {
+    address?: string;
+    category?: string;
+    website?: string;
+    yearFounded?: string;
+    /** Imagem(ns) de capa exibidas no topo do banner. */
+    coverImages: ProfileImage[];
+    /** URL do logótipo da empresa. */
+    logo?: string;
+    /** Nome da empresa/fábrica. */
+    name: string;
+    /** Nome do país (ex: "Angola"). */
+    countryLabel?: string;
+    /** Emoji ou URL da bandeira do país. */
+    countryFlag?: string;
+    /** Texto do botão de contacto (padrão: "Contactar fábrica"). */
+    contactLabel?: string;
+    /** Estatísticas rápidas exibidas por baixo do nome (sector, anos, etc). */
+    stats?: ProfileStatItem[];
+}
+/**
+ * Dados da secção "Sobre a Empresa".
+ */
+export interface ProfileAboutData {
+    /** Imagem ilustrativa da empresa (ex: fachada, fábrica). */
+    image?: string;
+    /** Texto alternativo da imagem. */
+    imageAlt?: string;
+    /** Título da secção (padrão: "Sobre a Empresa"). */
+    title?: string;
+    /** Parágrafos de texto descritivo da empresa. */
+    paragraphs: string[];
+}
+/**
+ * Dados da secção "Galeria".
+ */
+export interface ProfileGalleryData {
+    /** Título da secção (padrão: "Galeria da {name}"). */
+    title?: string;
+    /** Lista de imagens/vídeos da galeria. */
+    images: ProfileImage[];
+}
+/**
+ * Dados completos apresentados na página de perfil da empresa/fábrica.
+ */
+export interface CompanyProfileData {
+    /** Identificador único do perfil. */
+    id: string | number;
+    /** Dados do banner (capa, nome, estatísticas). */
+    banner: ProfileBannerData;
+    /** Dados da secção "Sobre a Empresa". */
+    about: ProfileAboutData;
+    /** Dados da secção "Galeria". */
+    gallery: ProfileGalleryData;
+}
+/**
+ * Propriedades do componente principal CompanyProfile.
+ */
+export interface CompanyProfileProps {
+    address?: string;
+    category?: string;
+    website?: string;
+    yearFounded?: string;
+    /** Dados completos do perfil a serem exibidos. */
+    data?: CompanyProfileData;
+    /**
+     * Estado de carregamento.
+     * Quando true, todos os blocos exibem Skeletons no lugar do conteúdo.
+     * @default false
+     */
+    isLoading?: boolean;
+    onWhatsapp?: (id: string | number) => void;
+    onEmail?: (id: string | number) => void; /** Callback executado quando o utilizador clica em copiar link. */
+    onCopyLink?: (id: string | number) => void;
+    /** Callback executado quando o utilizador clica em partilhar. */
+    onShare?: (id: string | number) => void;
+}
+export interface ProfileBannerTag {
+    label: string;
+    value: string;
+    icon?: string | IconSvgElement;
+}

package/dist/components/pages/company-profile/types.js

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

package/dist/components/pages/privacy-policy-or-terms-of-use/data.d.ts

@@ -0,0 +1,3 @@
+import type { DocPageData } from "./types";
+export declare const privacyPolicyData: DocPageData;
+export default privacyPolicyData;