negodesign 0.0.35 → 0.0.37

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte

@@ -1,47 +1,57 @@
-<script lang="ts">
-  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselPromotionProps } from "../types";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-  import Autoplay from "embla-carousel-autoplay";
-
-  const {
-    headerProps,
-    slotProps,
-    items,
-    isLoading = false,
-    isDescriptionIcon,
-    isDescriptionLabel,
-  }: CarouselPromotionProps = $props();
-
-  const responsive = useDevice();
-</script>
-
-<CarouselHeader {...headerProps}>
-  <CarouselSlot
-    {...slotProps}
-    containerClass="w-full"
-    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
-  >
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-5 w-75 basis-auto">
-          <CardPromotion
-            id={i}
-            {isLoading}
-            {isDescriptionIcon}
-            {isDescriptionLabel}
-          />
-        </Carousel.Item>
-      {/each}
-    {:else}
-      {#each items as item, i (`promotion-${item.id ?? i}`)}
-        <Carousel.Item class="pl-2 w-75 basis-auto">
-          <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
-        </Carousel.Item>
-      {/each}
-    {/if}
-  </CarouselSlot>
-</CarouselHeader>
+<script lang="ts">
+  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselPromotionProps } from "../types";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../i18n";
+  import Autoplay from "embla-carousel-autoplay";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+  }: CarouselPromotionProps = $props();
+
+  const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.promotions.title")}
+      description={$t("empty.promotions.description")}
+    />
+  {:else}
+    <CarouselSlot
+      {...slotProps}
+      containerClass="w-full"
+      plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+    >
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+          <Carousel.Item class="pl-5 w-75 basis-auto">
+            <CardPromotion
+              id={i}
+              {isLoading}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+            />
+          </Carousel.Item>
+        {/each}
+      {:else}
+        {#each items as item, i (`promotion-${item.id ?? i}`)}
+          <Carousel.Item class="pl-2 w-75 basis-auto">
+            <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </CarouselSlot>
+  {/if}
+</CarouselHeader>

package/dist/components/core/panel/NotFoundEmpty.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import * as Empty from "../../ui/empty/index.js";
+  import { t } from "../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Search01Icon } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+  import type { IconSvgElement } from "@hugeicons/svelte";
+
+  type Props = {
+    title?: string;
+    description?: string;
+    icon?: IconSvgElement;
+    className?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    showAction?: boolean;
+    children?: Snippet;
+  };
+
+  let {
+    title,
+    description,
+    icon = Search01Icon,
+    className = "",
+    actionHref = "#/",
+    actionLabel,
+    onAction,
+    showAction = false,
+    children,
+  }: Props = $props();
+
+  const resolvedTitle = $derived(title ?? $t("empty.title"));
+  const resolvedDescription = $derived(description ?? $t("empty.description"));
+</script>
+
+<Empty.Root class="w-full py-8 {className}">
+  <Empty.Header>
+    {#if icon}
+      <Empty.Media variant="icon">
+        <HugeiconsIcon {icon} class="size-6 text-muted-foreground" />
+      </Empty.Media>
+    {/if}
+    <Empty.Title class="text-base font-semibold">
+      {resolvedTitle}
+    </Empty.Title>
+    <Empty.Description class="text-sm text-muted-foreground max-w-sm">
+      {resolvedDescription}
+    </Empty.Description>
+  </Empty.Header>
+
+  {#if children}
+    <Empty.Content>
+      {@render children()}
+    </Empty.Content>
+  {:else if showAction || onAction}
+    <Empty.Content>
+      {#if onAction}
+        <button
+          type="button"
+          onclick={onAction}
+          class="text-xs font-medium text-primary hover:underline"
+        >
+          {actionLabel ?? $t("empty.contact_support")}
+        </button>
+      {:else}
+        <Empty.Description class="text-xs">
+          {$t("empty.support")}
+          <a href={actionHref} class="text-primary hover:underline font-medium ml-1">
+            {actionLabel ?? $t("empty.contact_support")}
+          </a>
+        </Empty.Description>
+      {/if}
+    </Empty.Content>
+  {/if}
+</Empty.Root>

package/dist/components/core/panel/NotFoundEmpty.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { IconSvgElement } from "@hugeicons/svelte";
+type Props = {
+    title?: string;
+    description?: string;
+    icon?: IconSvgElement;
+    className?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    showAction?: boolean;
+    children?: Snippet;
+};
+declare const NotFoundEmpty: import("svelte").Component<Props, {}, "">;
+type NotFoundEmpty = ReturnType<typeof NotFoundEmpty>;
+export default NotFoundEmpty;

package/dist/components/pages/company-profile/CompanyProfile.svelte

@@ -0,0 +1,144 @@
+<script lang="ts" module>
+  /**
+   * Página de perfil da empresa/fábrica.
+   * Combina o banner de apresentação, navegação entre secções
+   * (Sidebar em desktop, badges em mobile) e as secções
+   * "Sobre a Empresa" e "Galeria".
+   *
+   * @component
+   * @example
+   * ```svelte
+   * <CompanyProfile data={companyData} />
+   *
+   * <CompanyProfile
+   *   data={companyData}
+   *   onContact={(id) => openWhatsapp(id)}
+   *   onShare={(id) => navigator.share?.({ url: shareUrl(id) })}
+   * />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useDevice } from "../../../hooks/responsive.svelte";
+  import ProfileBanner from "./shared/ProfileBanner.svelte";
+  import ProfileSidebar from "./shared/ProfileSidebar.svelte";
+  import ProfileMenuBadge from "./shared/ProfileMenuBadge.svelte";
+  import ProfileAboutCompany from "./shared/ProfileAboutCompany.svelte";
+  import ProfileGallery from "./shared/ProfileGallery.svelte";
+  import ProfileProducts from "./shared/ProfileProducts.svelte";
+  import { defaultCompanyProfileData } from "./data";
+  import type { CompanyProfileProps, ProfileNavItem } from "./types";
+
+  let {
+    data = defaultCompanyProfileData,
+    isLoading = false,
+    onEmail,
+    onWhatsapp,
+    onCopyLink,
+    onShare,
+  }: CompanyProfileProps = $props();
+
+  const responsive = useDevice();
+
+  const sections: ProfileNavItem[] = [
+    { id: "banner", label: "Apresentação" },
+    { id: "sobre-empresa", label: "Sobre" },
+    { id: "galeria-empresa", label: "Galeria" },
+    { id: "products-empresa", label: "Produtos" },
+  ];
+
+  let activeSection = $state(sections[0]?.id);
+  let sectionEls: Record<string, HTMLElement> = {};
+
+  function scrollToSection(id: string) {
+    activeSection = id;
+    sectionEls[id]?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+
+  onMount(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (
+          visible[0]?.target instanceof HTMLElement &&
+          visible[0].target.dataset.sectionId
+        ) {
+          activeSection = visible[0].target.dataset.sectionId;
+        }
+      },
+      { rootMargin: "-45% 0px -45% 0px", threshold: 0 },
+    );
+
+    Object.values(sectionEls).forEach((el) => el && observer.observe(el));
+
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="">
+  {#if responsive.isMobile}
+    <ProfileMenuBadge
+      items={sections}
+      active={activeSection}
+      onSelect={scrollToSection}
+      className="mt-6"
+    />
+  {/if}
+
+  <div class="flex gap-6">
+    {#if !responsive.isMobile}
+      <ProfileSidebar
+        items={sections}
+        active={activeSection}
+        onSelect={scrollToSection}
+      />
+    {/if}
+
+    <div class="flex min-w-0 flex-1 flex-col gap-6 md:px-5 md:pl-10 lg:pl-12 pb-5 md:pb-10">
+      <div
+        id="banner"
+        bind:this={sectionEls["banner"]}
+        data-section-id="banner"
+        class="p-3"
+      >
+        <ProfileBanner
+          id={data.id}
+          data={data.banner}
+          {isLoading}
+          {onEmail}
+          {onWhatsapp}
+          {onCopyLink}
+          {onShare}
+        />
+      </div>
+
+      <div
+        id="sobre-empresa"
+        bind:this={sectionEls["sobre-empresa"]}
+        data-section-id="sobre-empresa"
+      >
+        <ProfileAboutCompany data={data.about} {isLoading} />
+      </div>
+
+      <div
+        id="galeria-empresa"
+        bind:this={sectionEls["galeria-empresa"]}
+        data-section-id="galeria-empresa"
+      >
+        <ProfileGallery data={data.gallery} {isLoading} />
+      </div>
+
+      <div
+        id="products-empresa"
+        bind:this={sectionEls["products-empresa"]}
+        data-section-id="products-empresa"
+      >
+        <ProfileProducts data={data.products} {isLoading} />
+      </div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,2 @@
+import type { CompanyProfileData } from "./types";
+export declare const defaultCompanyProfileData: CompanyProfileData;

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

@@ -0,0 +1,115 @@
+import ImgPlaceholder from "../../../assets/placeholder-image.png";
+import VideoPlaceholder from "../../../assets/lonely-404.mp4";
+export const defaultCompanyProfileData = {
+    id: "cartaplast",
+    banner: {
+        coverImages: [
+            {
+                src: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=1200&auto=format&fit=crop",
+                alt: "Armazém de bobinas e logística Cartaplast",
+            },
+            {
+                src: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1200&auto=format&fit=crop",
+                alt: "Linha de produção industrial de embalagens",
+            },
+        ],
+        logo: "https://images.unsplash.com/photo-1560179707-f14e90ef3623?q=80&w=300&auto=format&fit=crop",
+        name: "Hotel empanados S.A",
+        countryLabel: "Angola",
+        countryFlag: "🇦🇴",
+        contactLabel: "Contactar fábrica",
+        stats: [
+            { label: "Setor de atuação", value: "Papel e Embalagens" },
+            { label: "Anos de Atuação", value: "8+ Anos" },
+            { label: "Número de Funcionários", value: "51 - 100 Funcionários" },
+            { label: "Localização", value: "Polo Industrial da Catumbela, Benguela" },
+        ],
+    },
+    about: {
+        image: "https://images.unsplash.com/photo-1504917599217-d4dc5ebe6122?q=80&w=1200&auto=format&fit=crop",
+        imageAlt: "Instalações industriais da fábrica Cartaplast",
+        title: "Sobre a CARTAPLAST",
+        paragraphs: [
+            "A Cartaplast é uma empresa de referência em Angola, especializada na fabricação de cartão canelado, caixas de papelão e soluções sustentáveis de embalagens industriais, localizada estrategicamente no Polo de Desenvolvimento Industrial da Catumbela (PDIC), na província de Benguela.",
+            "A nossa capacidade instalada e tecnologia de ponta proporcionam total flexibilidade na produção de múltiplos modelos e dimensões de caixas com impressão personalizada de alta precisão, agregando valor e identidade à marca de cada parceiro.",
+            "Com rigorosos padrões de controlo de qualidade e foco na sustentabilidade, atendemos com excelência os setores da Indústria Pesqueira, Agroalimentar, Avicultura, Bebidas, Farmacêutica, Distribuição e Comércio Geral em todo o país.",
+        ],
+    },
+    gallery: {
+        title: "Galeria",
+        images: [
+            {
+                src: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1200&auto=format&fit=crop",
+                alt: "Linha de produção automatizada de caixas",
+                type: "image",
+            },
+            {
+                src: VideoPlaceholder,
+                alt: "Vídeo institucional e processo de fabrico",
+                type: "video",
+            },
+            {
+                src: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=1200&auto=format&fit=crop",
+                alt: "Armazém de matéria-prima e bobinas de papel",
+                type: "image",
+            },
+            {
+                src: "https://images.unsplash.com/photo-1504917599217-d4dc5ebe6122?q=80&w=1200&auto=format&fit=crop",
+                alt: "Maquinaria de corte e vincagem",
+                type: "image",
+            },
+            {
+                src: "https://images.unsplash.com/photo-1587293852726-70cdb56c2866?q=80&w=1200&auto=format&fit=crop",
+                alt: "Área de expedição e embalamento final",
+                type: "image",
+            },
+        ],
+    },
+    products: {
+        title: "Produtos e Soluções",
+        description: "Conheça as principais soluções de embalagens e produtos industriais fabricados sob medida.",
+        variant: 1,
+        items: [
+            {
+                id: "prod-1",
+                title: "Caixas de Papelão Canelado",
+                content: "Embalagens resistentes de alta durabilidade para transporte industrial e exportação.",
+                price: "12.500 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Industrial" }, { text: "Canelado" }],
+            },
+            {
+                id: "prod-2",
+                title: "Bobinas de Papel Kraft",
+                content: "Bobinas industriais de papel kraft para empacotamento e proteção de mercadorias.",
+                price: "35.000 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Kraft" }, { text: "Sustentável" }],
+            },
+            {
+                id: "prod-3",
+                title: "Caixas para Setor Alimentar",
+                content: "Embalagens certificadas para conservação e distribuição de alimentos frescos e congelados.",
+                price: "18.000 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1504917599217-d4dc5ebe6122?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Alimentar" }, { text: "Certificado" }],
+            },
+            {
+                id: "prod-4",
+                title: "Embalagens Personalizadas",
+                content: "Impressão flexográfica personalizada em caixas de todos os formatos e medidas.",
+                price: "22.000 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1587293852726-70cdb56c2866?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Personalizado" }, { text: "Design" }],
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+  /**
+   * Secção "Sobre a Empresa": imagem ilustrativa e parágrafos descritivos.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProfileAboutCompany data={data.about} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import ImgPlaceholder from "../../../../assets/placeholder-image.png";
+  import type { ProfileAboutData } from "../types";
+
+  let {
+    data,
+    isLoading = false,
+    className,
+  }: {
+    data: ProfileAboutData;
+    isLoading?: boolean;
+    className?: string;
+  } = $props();
+</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">
+    <svg
+      viewBox="0 0 24 24"
+      class="size-5 text-muted-foreground"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M3 21h18" />
+      <path d="M6 21V7l6-4 6 4v14" />
+      <path d="M10 21v-6h4v6" />
+      <path d="M10 11h.01M14 11h.01M10 15h.01M14 15h.01" />
+    </svg>
+    Sobre a Empresa
+  </h2>
+
+  {#if isLoading}
+    <div class="grid gap-6 md:grid-cols-2">
+      <Skeleton class="aspect-4/3 w-full rounded-lg" />
+      <div class="flex flex-col gap-3">
+        {#each Array.from({ length: 5 }) as _, i (i)}
+          <Skeleton class="h-4 w-full rounded-md" />
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="grid gap-6 md:grid-cols-2 md:items-start">
+      {#if data.image}
+        <div class="overflow-hidden rounded-lg border">
+          <img
+            src={data.image || ImgPlaceholder}
+            alt={data.imageAlt ?? data.title ?? "Sobre a empresa"}
+            class="aspect-4/3 w-full object-cover"
+            onerror={(e) =>
+              ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+          />
+        </div>
+      {/if}
+
+      <div class="flex flex-col gap-4">
+        {#each data.paragraphs as paragraph, i (i)}
+          <p class="leading-7 text-foreground/80">{paragraph}</p>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

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

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