negodesign 0.0.35 → 0.0.37

package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte

@@ -1,8 +1,10 @@
 <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 NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
   import CardMedia from "../../../../card/media/CardMedia.svelte";
   import type { CarouselGridMediaProps } from "../../../../../../types";
 
@@ -16,34 +18,42 @@
   }: CarouselGridMediaProps = $props();
 
   const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
 </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">
-            <CardMedia id={i} {variant} isLoading />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardMedia id={i} {variant} isLoading />
-          </div>
-        {/if}
-      {/each}
-    {:else}
-      {#each items as item, i (`media-${item.id ?? i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardMedia {...item} {variant} />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardMedia {...item} {variant} />
-          </div>
-        {/if}
-      {/each}
-    {/if}
-  </CarouselGridSlot>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.media.title")}
+      description={$t("empty.media.description")}
+    />
+  {:else}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardMedia id={i} {variant} isLoading />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardMedia id={i} {variant} isLoading />
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        {#each items as item, i (`media-${item.id ?? i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardMedia {...item} {variant} />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardMedia {...item} {variant} />
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </CarouselGridSlot>
+  {/if}
 </CarouselHeader>

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,71 @@
+<script lang="ts">
+  import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
+  import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
+  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();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.products.title")}
+      description={$t("empty.products.description")}
+    />
+  {:else}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#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 (`product-${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>
+  {/if}
+</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/profile/ui/CarouselGridProfile.svelte

@@ -1,8 +1,10 @@
 <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 NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
   import CardProfile from "../../../../card/profile/CardProfile.svelte";
   import type { CarouselGridProfileProps } from "../../../../../../types";
 
@@ -22,52 +24,60 @@
   }: CarouselGridProfileProps = $props();
 
   const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
 </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">
-            <CardProfile id={i} {variant} isLoading />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardProfile 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">
-            <CardProfile
-              {...item}
-              {variant}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-              {onEmailClick}
-              {onWhatsappClick}
-              {onButtonProfile}
-              {onFavoriteClick}
-            />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardProfile
-              {...item}
-              {variant}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-              {onEmailClick}
-              {onWhatsappClick}
-              {onButtonProfile}
-              {onFavoriteClick}
-            />
-          </div>
-        {/if}
-      {/each}
-    {/if}
-  </CarouselGridSlot>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.profiles.title")}
+      description={$t("empty.profiles.description")}
+    />
+  {:else}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardProfile id={i} {variant} isLoading />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardProfile 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">
+              <CardProfile
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+                {onEmailClick}
+                {onWhatsappClick}
+                {onButtonProfile}
+                {onFavoriteClick}
+              />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardProfile
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+                {onEmailClick}
+                {onWhatsappClick}
+                {onButtonProfile}
+                {onFavoriteClick}
+              />
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </CarouselGridSlot>
+  {/if}
 </CarouselHeader>

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,68 @@
+<script lang="ts">
+  import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
+  import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
+  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();
+  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}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#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>
+  {/if}
+</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/highlights/ui/CarouselHighlights.svelte

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

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,57 @@
+<script lang="ts">
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../panel/NotFoundEmpty.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 { t } from "../../../../../i18n";
+  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();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.products.title")}
+      description={$t("empty.products.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">
+            <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>
+  {/if}
+</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;