negodesign 0.0.35 → 0.0.36

package/dist/components/core/carousel/grid/product/types.d.ts

@@ -0,0 +1,22 @@
+import type { CardProductProps } from "../../../card/types";
+import type { CarouselSlotProps } from "../../../panel/type";
+import type { CarouselHeaderProps } from "../../types";
+/**
+ * Props do CarouselGridProduct — layout em grid de cards de product
+ */
+export interface CarouselGridProductProps {
+    /** Props do cabeçalho do carousel (título, descrição, etc.) */
+    headerProps?: CarouselHeaderProps;
+    /** Props do slot/container do carousel (botões navegação, plugins) */
+    slotProps?: CarouselSlotProps;
+    /** Classe CSS adicional para o container do grid */
+    gridClass?: string;
+    /** Variante visual do card: 1 ou 2 */
+    variant?: 1 | 2;
+    /** Lista de perfis para exibir nos cards */
+    items: CardProductProps[];
+    /** Estado de carregamento (skeleton) */
+    isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
+}

package/dist/components/core/carousel/grid/product/types.js

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

package/dist/components/core/carousel/grid/product/ui/CarouselGridProduct.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
+  import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import CardProduct from "../../../../card/product/CardProduct.svelte";
+  import type { CarouselGridProductProps } from "../types";
+
+  const {
+    headerProps,
+    slotProps,
+    gridClass = "lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+    items,
+    variant,
+    isLoading = false,
+    isDescriptionIcon = false,
+    isDescriptionLabel = false,
+  }: CarouselGridProductProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader {...headerProps}>
+  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
+    {#if isLoading}
+      {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardProduct id={i} {variant} isLoading />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardProduct id={i} {variant} isLoading />
+          </div>
+        {/if}
+      {/each}
+    {:else}
+      {#each items as item, i (`profile-${item.id ?? i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardProduct
+              {...item}
+              {variant}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+            />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardProduct
+              {...item}
+              {variant}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+            />
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </CarouselGridSlot>
+</CarouselHeader>

package/dist/components/core/carousel/grid/product/ui/CarouselGridProduct.svelte.d.ts

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

package/dist/components/core/carousel/grid/promotion/types.d.ts

@@ -0,0 +1,23 @@
+import type { CardPromotionProps } from "../../../card/types";
+import type { CarouselSlotProps } from "../../../panel/type";
+import type { CarouselHeaderProps } from "../../types";
+/**
+ * Props do CarouselGridProfile — layout em grid de cards de perfil
+ * (guias, intérpretes, organizações). Em mobile vira carousel com swipe.
+ */
+export interface CarouselGridPromotionProps {
+    /** Props do cabeçalho do carousel (título, descrição, etc.) */
+    headerProps?: CarouselHeaderProps;
+    /** Props do slot/container do carousel (botões navegação, plugins) */
+    slotProps?: CarouselSlotProps;
+    /** Classe CSS adicional para o container do grid */
+    gridClass?: string;
+    /** Variante visual do card: 1 ou 2 */
+    variant?: 1 | 2;
+    /** Lista de perfis para exibir nos cards */
+    items: CardPromotionProps[];
+    /** Estado de carregamento (skeleton) */
+    isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
+}

package/dist/components/core/carousel/grid/promotion/types.js

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

package/dist/components/core/carousel/grid/promotion/ui/CarouselGridPromotion.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
+  import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import CardPromotion from "../../../../card/promotion/CardPromotion.svelte";
+  import type { CarouselGridPromotionProps } from "../types";
+
+  const {
+    headerProps,
+    slotProps,
+    gridClass = "lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
+    items,
+    isLoading = false,
+    isDescriptionIcon = false,
+    isDescriptionLabel = false,
+  }: CarouselGridPromotionProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader {...headerProps}>
+  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
+    {#if isLoading}
+      {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardPromotion id={i} isLoading />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardPromotion id={i} isLoading />
+          </div>
+        {/if}
+      {/each}
+    {:else}
+      {#each items as item, i (`promotion-${item.id ?? i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </CarouselGridSlot>
+</CarouselHeader>

package/dist/components/core/carousel/grid/promotion/ui/CarouselGridPromotion.svelte.d.ts

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

package/dist/components/core/carousel/product/types.d.ts

@@ -0,0 +1,21 @@
+import type { CardProductProps } from "../../card/types";
+import type { CarouselSlotProps } from "../../panel/type";
+import type { CarouselHeaderProps } from "../types";
+/**
+ * Props do CarouselProduct — carousel de cards de produto
+ * com preços antigo/novo e botões de compra.
+ */
+export interface CarouselProductProps {
+    /** Props do cabeçalho do carousel (título, descrição, etc.) */
+    headerProps?: CarouselHeaderProps;
+    /** Props do slot/container do carousel (botões navegação, plugins) */
+    slotProps?: CarouselSlotProps;
+    /** Lista de promoções para exibir */
+    items: CardProductProps[];
+    /** Exibe ícone antes da descrição do card */
+    isDescriptionIcon?: boolean;
+    /** Exibe etiqueta (label) na descrição do card */
+    isDescriptionLabel?: boolean;
+    /** Estado de carregamento (skeleton) */
+    isLoading?: boolean;
+}

package/dist/components/core/carousel/product/types.js

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

package/dist/components/core/carousel/product/ui/CarouselProduct.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselProductProps } from "../types";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import Autoplay from "embla-carousel-autoplay";
+  import CardProduct from "../../../card/product/CardProduct.svelte";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+  }: CarouselProductProps = $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">
+          <CardProduct
+            id={i}
+            {isLoading}
+            {isDescriptionIcon}
+            {isDescriptionLabel}
+          />
+        </Carousel.Item>
+      {/each}
+    {:else}
+      {#each items as item, i (`product-${item.id ?? i}`)}
+        <Carousel.Item class="pl-2 w-75 basis-auto">
+          <CardProduct {...item} {isDescriptionIcon} {isDescriptionLabel} />
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </CarouselSlot>
+</CarouselHeader>

package/dist/components/core/carousel/product/ui/CarouselProduct.svelte.d.ts

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

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

@@ -0,0 +1,140 @@
+<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 { defaultCompanyProfileData } from "./data";
+  import type { CompanyProfileProps, ProfileNavItem } from "./types";
+
+  let {
+    data = defaultCompanyProfileData,
+    isLoading = false,
+    yearFounded,
+    category,
+    address,
+    website,
+    onEmail,
+    onWhatsapp,
+    onCopyLink,
+    onShare,
+  }: CompanyProfileProps = $props();
+
+  const responsive = useDevice();
+
+  const sections: ProfileNavItem[] = [
+    { id: "banner", label: "Apresentação" },
+    { id: "sobre-empresa", label: "Sobre a empresa" },
+    { id: "galeria-empresa", label: "Galeria da empresa" },
+  ];
+
+  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">
+      <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>
+
+      <hr />
+
+      <div
+        id="galeria-empresa"
+        bind:this={sectionEls["galeria-empresa"]}
+        data-section-id="galeria-empresa"
+      >
+        <ProfileGallery data={data.gallery} {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,68 @@
+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",
+            },
+        ],
+    },
+};

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;