negodesign 0.0.31 → 0.0.33

package/dist/components/NegoDesign.svelte

@@ -1,17 +1,9 @@
 <script lang="ts">
   import { ModeWatcher } from "mode-watcher";
   import { setUserTranslations } from "../i18n/config";
+  import type { NegoDesignProps } from "../types";
 
-  type Translations = Record<string, Record<string, string>>;
-
-  let {
-    translations,
-    children,
-  }: {
-    /** Custom translations per language. Merged with the library's base translations. */
-    translations?: Translations;
-    children: any;
-  } = $props();
+  let { translations, children }: NegoDesignProps = $props();
 
   $effect(() => {
     if (translations) {

package/dist/components/NegoDesign.svelte.d.ts

@@ -1,9 +1,4 @@
-type Translations = Record<string, Record<string, string>>;
-type $$ComponentProps = {
-    /** Custom translations per language. Merged with the library's base translations. */
-    translations?: Translations;
-    children: any;
-};
-declare const NegoDesign: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { NegoDesignProps } from "../types";
+declare const NegoDesign: import("svelte").Component<NegoDesignProps, {}, "">;
 type NegoDesign = ReturnType<typeof NegoDesign>;
 export default NegoDesign;

package/dist/components/core/card/profile/01/CardProfile01.svelte

@@ -3,7 +3,7 @@
    * Card component with a title and content.
    * @component
    */
-  import { InformationCircleIcon, UserIcon } from "@hugeicons/core-free-icons";
+  import { UserIcon } from "@hugeicons/core-free-icons";
   import { t } from "../../../../../i18n";
   import type { CardProfileProps } from "../../types";
   import CardStarRating from "../../shared/CardStarRating.svelte";
@@ -12,6 +12,8 @@
   import CardButton from "../../shared/CardButton.svelte";
   import CardFavorite from "../../shared/CardFavorite.svelte";
   import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import CardPhoneOrWhatsapp from "../../shared/CardPhoneOrWhatsapp.svelte";
+  import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
 
   let {
     id,
@@ -24,93 +26,116 @@
     isTagBorderBottom = true,
     isFavorite = false,
     buttonProfileClass,
-    buttonDetailsClass,
     isLoading = false,
+    imageUrl,
+    videoUrl,
+    isImageButtonMaximized = false,
+    isVideoButtonMaximized = false,
+    isDescriptionIcon = false,
+    isDescriptionLabel = false,
+    onEmailClick,
+    onWhatsappClick,
     onFavoriteClick,
     onButtonProfile,
-    onButtonDetails,
   }: CardProfileProps = $props();
-
-  let isShowButtonProfileAndDetails = $derived(
-    onButtonProfile != null && onButtonDetails != null,
-  );
 </script>
 
 <article
-  class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
+  class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg relative"
 >
-  <div class="flex justify-between items-center w-full mb-4">
-    <div class="flex justify-start gap-2">
-      <div class="flex justify-center items-center">
-        {#if isLoading}
-          <Skeleton class="w-12 h-12 rounded-lg bg-gray-300" />
-        {:else if logo}
-          <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-        {/if}
+  <div class="p-5">
+    <div class="flex justify-between items-center w-full">
+      <div class="w-full flex flex-col justify-center items-center relative">
+        <div>
+          {#if isLoading}
+            <Skeleton
+              class="w-12 h-12 md:w-14 md:h-14 lg:w-20 lg:h-20 rounded-full bg-gray-300"
+            />
+          {:else if imageUrl}
+            <img
+              src={imageUrl}
+              alt={imageUrl}
+              class="w-12 h-12 md:w-14 md:h-14 lg:w-20 lg:h-20 rounded-full"
+            />
+          {/if}
+        </div>
+        <div>
+          {#if title}
+            <div class="text-center font-bold">{title}</div>
+          {:else if isLoading}
+            <Skeleton class="w-40 h-5 rounded-lg bg-gray-400 mb-0.5" />
+          {/if}
+        </div>
+        <div>
+          {#if startNumber}
+            <CardStarRating {startNumber} {startMax} {isLoading} />
+          {:else if isLoading}
+            <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+          {/if}
+        </div>
       </div>
-      <div class="flex-col">
-        {#if title}
-          <div class="text-center font-bold text-lg">{title}</div>
-        {:else if isLoading}
-          <Skeleton class="w-40 h-5 rounded-lg bg-gray-400 mb-0.5" />
-        {/if}
 
-        {#if startNumber}
-          <CardStarRating {startNumber} {startMax} {isLoading} />
-        {:else if isLoading}
-          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
-        {/if}
+      <div class="flex justify-end items-center absolute top-1 right-1">
+        <CardFavorite
+          {id}
+          {isFavorite}
+          onFavoriteClick={() => onFavoriteClick!(id)}
+          {isLoading}
+        />
       </div>
     </div>
-    <div class="flex justify-end items-center">
-      <CardFavorite
-        {id}
-        {isFavorite}
-        onFavoriteClick={() => onFavoriteClick!(id)}
+
+    <div class="my-2">
+      <CardDescription
+        {content}
         {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
       />
     </div>
-  </div>
 
-  <div class="h-15 my-2">
-    <CardDescription {content} {isLoading} />
-  </div>
+    {#if tags}
+      <CardTags
+        className="my-4"
+        tags={tags ?? []}
+        {isTagBorderBottom}
+        {isLoading}
+      />
+    {:else}
+      <CardTags
+        className="my-4"
+        tags={[{ text: "- - -" }]}
+        {isTagBorderBottom}
+        {isLoading}
+      />
+    {/if}
 
-  <CardTags
-    className="my-6"
-    tags={tags ?? []}
-    {isTagBorderBottom}
-    {isLoading}
-  />
+    <CardThumbnailVideo
+      {imageUrl}
+      {videoUrl}
+      {isImageButtonMaximized}
+      {isVideoButtonMaximized}
+      {isLoading}
+      class="md:h-32.5 lg:h-44"
+    />
 
-  {#if onButtonProfile || onButtonDetails}
-    <div class="flex justify-center items-center gap-2 mt-4 w-full">
-      {#if onButtonProfile}
-        <CardButton
-          {id}
-          icon={UserIcon}
-          className={buttonProfileClass}
-          text={$t("label.view.profile")}
-          onClick={onButtonProfile}
-          isFlex={isShowButtonProfileAndDetails}
-          {isLoading}
-        />
-      {:else if isLoading}
-        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
-      {/if}
-      {#if onButtonDetails}
-        <CardButton
-          {id}
-          icon={InformationCircleIcon}
-          className={buttonDetailsClass}
-          text={$t("label.more.details")}
-          onClick={onButtonDetails}
-          isFlex={isShowButtonProfileAndDetails}
-          {isLoading}
-        />
-      {:else if isLoading}
-        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
-      {/if}
-    </div>
-  {/if}
+    {#if onButtonProfile}
+      <div class="flex justify-center items-center gap-2 w-full mt-3 -mb-1">
+        {#if onButtonProfile}
+          <CardButton
+            {id}
+            icon={UserIcon}
+            className={buttonProfileClass}
+            text={$t("label.view.profile")}
+            onClick={onButtonProfile}
+            {isLoading}
+            isFlex
+          />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+        {/if}
+      </div>
+    {/if}
+  </div>
+  <CardPhoneOrWhatsapp {id} {onEmailClick} {onWhatsappClick} />
 </article>

package/dist/components/core/card/profile/02/CardProfile02.svelte

@@ -12,6 +12,8 @@
   import CardButton from "../../shared/CardButton.svelte";
   import CardFavorite from "../../shared/CardFavorite.svelte";
   import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
+  import CardPhoneOrWhatsapp from "../../shared/CardPhoneOrWhatsapp.svelte";
   let {
     id,
     tags,
@@ -24,45 +26,50 @@
     isTagBorderBottom = true,
     isFavorite = false,
     buttonProfileClass,
-    buttonDetailsClass,
+    onEmailClick,
+    onWhatsappClick,
     isLoading = false,
     onFavoriteClick,
     onButtonProfile,
-    onButtonDetails,
+    imageUrl,
+    videoUrl,
+    isImageButtonMaximized = false,
+    isVideoButtonMaximized = false,
+    isDescriptionLabel = false,
+    isDescriptionIcon = false,
   }: CardProfileProps = $props();
-
-  let isShowButtonProfileAndDetails = $derived(
-    onButtonProfile != null && onButtonDetails != null,
-  );
 </script>
 
 <article
-  class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
+  class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg space-y-1 md:space-y-3 relative {className}"
 >
-  <div class="flex flex-col justify-center items-center w-full relative">
-    <div class="flex flex-col justify-start gap-2">
-      <div class="flex justify-center items-center">
-        {#if isLoading}
-          <Skeleton class="w-12 h-12 rounded-lg bg-gray-400 mt-0.5" />
-        {:else if logo}
-          <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-        {/if}
-      </div>
-      <div class="flex flex-col justify-center items-center">
-        {#if title}
-          <div class="text-center font-bold text-lg">{title}</div>
-        {:else if isLoading}
-          <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
-        {/if}
+  <div class="p-5">
+    <div class="flex justify-start items-center w-full relative">
+      <div class="flex justify-start gap-2">
+        <div class="flex justify-center items-center">
+          {#if isLoading}
+            <Skeleton class="w-12 h-12 rounded-lg bg-gray-400 mt-0.5" />
+          {:else if logo}
+            <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+          {/if}
+        </div>
+        <div class="flex flex-col justify-start items-start">
+          {#if title}
+            <div class="text-left font-bold">{title}</div>
+          {:else if isLoading}
+            <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+          {/if}
 
-        {#if startNumber}
-          <CardStarRating {startNumber} {startMax} {isLoading} />
-        {:else if isLoading}
-          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
-        {/if}
+          {#if startNumber}
+            <CardStarRating {startNumber} {startMax} {isLoading} />
+          {:else if isLoading}
+            <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+          {/if}
+        </div>
       </div>
     </div>
-    <div class="flex justify-end items-center absolute top-0 right-0">
+
+    <div class="flex justify-end items-center absolute top-1 right-1">
       <CardFavorite
         {id}
         {isFavorite}
@@ -70,45 +77,57 @@
         {isLoading}
       />
     </div>
-  </div>
 
-  <div class="h-15 mb-8">
-    <CardDescription {content} {isLoading} />
-  </div>
+    <div class="mb-4">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionLabel}
+        {isDescriptionIcon}
+      />
+    </div>
 
-  <CardTags
-    className="my-4"
-    tags={tags ?? []}
-    {isTagBorderBottom}
-    {isLoading}
-  />
+    {#if tags && tags.length > 0}
+      <CardTags
+        className="my-4"
+        tags={tags ?? []}
+        {isTagBorderBottom}
+        {isLoading}
+      />
+    {:else}
+      <CardTags
+        className="my-4"
+        tags={[{ text: "- - -" }]}
+        {isTagBorderBottom}
+        {isLoading}
+      />
+    {/if}
 
-  {#if onButtonProfile || onButtonDetails}
-    <div class="flex justify-center items-center gap-2 mt-4 w-full">
-      {#if onButtonProfile}
-        <CardButton
-          {id}
-          icon={UserIcon}
-          className={buttonProfileClass}
-          text={$t("label.view.profile")}
-          onClick={onButtonProfile}
-          isFlex={isShowButtonProfileAndDetails}
-        />
-      {:else if isLoading}
-        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
-      {/if}
-      {#if onButtonDetails}
-        <CardButton
-          {id}
-          icon={InformationCircleIcon}
-          className={buttonDetailsClass}
-          text={$t("label.more.details")}
-          onClick={onButtonDetails}
-          isFlex={isShowButtonProfileAndDetails}
-        />
-      {:else if isLoading}
-        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
-      {/if}
-    </div>
-  {/if}
+    <CardThumbnailVideo
+      {imageUrl}
+      {videoUrl}
+      {isImageButtonMaximized}
+      {isVideoButtonMaximized}
+      {isLoading}
+      class="md:h-32.5 lg:h-44"
+    />
+
+    {#if onButtonProfile}
+      <div class="flex justify-center items-center gap-2 mt-2 -mb-2 w-full">
+        {#if onButtonProfile}
+          <CardButton
+            {id}
+            icon={UserIcon}
+            className={buttonProfileClass}
+            text={$t("label.view.profile")}
+            onClick={onButtonProfile}
+            isFlex
+          />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+        {/if}
+      </div>
+    {/if}
+  </div>
+  <CardPhoneOrWhatsapp {id} {onEmailClick} {onWhatsappClick} />
 </article>

package/dist/components/core/card/profile/data.js

@@ -8,6 +8,8 @@ const items = [
         startNumber: 5,
         startMax: 5,
         isFavorite: true,
+        imageUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
+        videoUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
         tags: [
             {
                 icon: GlobalIcon,
@@ -30,6 +32,8 @@ const items = [
         content: 'Suítes modernas no coração da cidade, com spa completo e serviço de quarto 24 horas.',
         startNumber: 4,
         startMax: 5,
+        imageUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
+        videoUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
         tags: [
             {
                 icon: GlobalIcon,
@@ -57,6 +61,8 @@ const items = [
         startNumber: 5,
         startMax: 5,
         isFavorite: true,
+        imageUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
+        videoUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
         tags: [
             {
                 icon: GlobalIcon,
@@ -75,6 +81,8 @@ const items = [
         content: 'Localização privilegiada no centro urbano, ideal para viagens de negócios, com centro de conferências.',
         startNumber: 3,
         startMax: 5,
+        imageUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
+        videoUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
         tags: [
             {
                 icon: NecklaceIcon,
@@ -102,6 +110,8 @@ const items = [
         startNumber: 4,
         startMax: 5,
         isFavorite: true,
+        imageUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
+        videoUrl: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
     },
 ];
 export default items;

package/dist/components/core/card/shared/CardDescription.svelte

@@ -15,7 +15,7 @@
   let {
     content,
     isLoading = false,
-    isDescriptionIcon = true,
+    isDescriptionIcon = false,
     isDescriptionLabel = true,
   }: CardDescriptionProps = $props();
 </script>
@@ -27,12 +27,12 @@
     <div class="mb-1 text-[14px] md:text-[15px] flex items-center gap-1">
       {#if isDescriptionIcon}
         <HugeiconsIcon icon={Message01Icon} class="h-4 w-4" />
-      {/if}11
+      {/if}
       <div>{$t("label.description")}</div>
     </div>
   {/if}
   <TruncatableText
     text={content}
-    class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-4"
+    class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-2"
   />
 {/if}

package/dist/components/core/card/shared/CardPhoneOrWhatsapp.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Mail01Icon, WhatsappIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { CardPhoneOrWhatsappProps } from "../types";
+
+  let { id, onEmailClick, onWhatsappClick }: CardPhoneOrWhatsappProps =
+    $props();
+
+  let isFlex = $derived(onEmailClick && onWhatsappClick);
+</script>
+
+<div class="flex border-t border-gray-300 dark:border-gray-700">
+  {#if onEmailClick}
+    <button
+      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-red-800 hover:text-white cursor-pointer rounded-bl-lg"
+      onclick={() => onEmailClick?.(id)}
+    >
+      <HugeiconsIcon icon={Mail01Icon} size={20} />
+      <span>Email</span>
+    </button>
+  {/if}
+  {#if isFlex}
+    <div class="border-l border-gray-300 dark:border-gray-700"></div>
+  {/if}
+  {#if onWhatsappClick}
+    <button
+      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-green-600 hover:text-white cursor-pointer rounded-br-lg"
+      onclick={() => onWhatsappClick?.(id)}
+    >
+      <HugeiconsIcon icon={WhatsappIcon} size={20} />
+      <span>Whatsapp</span>
+    </button>
+  {/if}
+</div>

package/dist/components/core/card/shared/CardPhoneOrWhatsapp.svelte.d.ts

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

package/dist/components/core/card/shared/CardStartPrice.svelte

@@ -19,7 +19,7 @@
     />
   {/if}
   {#if newPrice && oldPrice}
-    <div class="z-20 flex justify-center items-center">
+    <div class="z-20 flex justify-start items-center">
       <div class="font-extrabold text-lg">{newPrice}</div>
       <div class="mx-2">/</div>
       <div class="font-semibold line-through text-red-600 text-[10px]">

package/dist/components/core/card/types.d.ts

@@ -86,14 +86,24 @@ export interface CardProfileProps {
     isTagBorderBottom?: boolean;
     /** Classe CSS personalizada para botão de perfil */
     buttonProfileClass?: string;
-    /** Classe CSS personalizada para botão de detalhes */
-    buttonDetailsClass?: string;
     /** Callback ao clicar no botão favorito */
     onFavoriteClick?: (id: string | number) => void;
     /** Callback ao clicar no botão perfil */
     onButtonProfile?: (id: string | number) => void;
-    /** Callback ao clicar no botão detalhes */
-    onButtonDetails?: (id: string | number) => void;
+    /** Callback ao clicar no botão email */
+    onEmailClick?: (id: string | number) => void;
+    /** Callback ao clicar no botão whatsapp */
+    onWhatsappClick?: (id: string | number) => void;
+    /** URL da foto/imagem do perfil */
+    imageUrl?: string;
+    /** URL do vídeo do perfil */
+    videoUrl?: string;
+    /** Indica se o botão de maximizar imagem está ativo */
+    isImageButtonMaximized?: boolean;
+    /** Indica se o botão de maximizar vídeo está ativo */
+    isVideoButtonMaximized?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
 }
 /**
  * Props do CardPromotion — card de promoção com preço antigo/novo,
@@ -177,3 +187,8 @@ export interface CardHighlightProps {
     /** Callback ao clicar no botão principal */
     onClickBtn?: (id: string | number) => void;
 }
+export interface CardPhoneOrWhatsappProps {
+    id: string | number;
+    onEmailClick?: (id: string | number) => void;
+    onWhatsappClick?: (id: string | number) => void;
+}

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

@@ -5,7 +5,7 @@ import type { CarouselHeaderProps } from "../../types";
  * Props do CarouselGridMedia — layout em grid de cards de mídia
  * (imagens/vídeos). Em telas mobile o grid vira carousel com swipe.
  */
-export interface CarouselMediaProps {
+export interface CarouselGridMediaProps {
     /** Props do cabeçalho do carousel (título, descrição, etc.) */
     headerProps?: CarouselHeaderProps;
     /** Props do slot/container do carousel (botões navegação, plugins) */

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

@@ -1,10 +1,10 @@
 <script lang="ts">
   import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
   import * as Carousel from "../../../../../ui/carousel/index.js";
-  import type { CarouselMediaProps } from "../types";
   import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
   import CardMedia from "../../../../card/media/CardMedia.svelte";
+  import type { CarouselGridMediaProps } from "../../../../../../types";
 
   const {
     headerProps,
@@ -13,7 +13,7 @@
     items,
     variant,
     isLoading = false,
-  }: CarouselMediaProps = $props();
+  }: CarouselGridMediaProps = $props();
 
   const responsive = useDevice();
 </script>
@@ -21,7 +21,7 @@
 <CarouselHeader {...headerProps}>
   <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
     {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 9 }, ) as _, i (`loading-${i}`)}
+      {#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 />

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

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

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

@@ -5,7 +5,7 @@ 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 CarouselProfileProps {
+export interface CarouselGridProfileProps {
     /** Props do cabeçalho do carousel (título, descrição, etc.) */
     headerProps?: CarouselHeaderProps;
     /** Props do slot/container do carousel (botões navegação, plugins) */
@@ -18,4 +18,13 @@ export interface CarouselProfileProps {
     items: CardProfileProps[];
     /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
+    onFavoriteClick?: (id: string | number) => void;
+    /** Callback ao clicar no botão perfil */
+    onButtonProfile?: (id: string | number) => void;
+    /** Callback ao clicar no botão email */
+    onEmailClick?: (id: string | number) => void;
+    /** Callback ao clicar no botão whatsapp */
+    onWhatsappClick?: (id: string | number) => void;
 }

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -3,17 +3,23 @@
   import * as Carousel from "../../../../../ui/carousel/index.js";
   import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
-  import type { CarouselProfileProps } from "../types";
   import CardProfile from "../../../../card/profile/CardProfile.svelte";
+  import type { CarouselGridProfileProps } from "../../../../../../types";
 
   const {
     headerProps,
     slotProps,
-    gridClass,
+    gridClass = "lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
     items,
     variant,
     isLoading = false,
-  }: CarouselProfileProps = $props();
+    isDescriptionIcon = false,
+    isDescriptionLabel = false,
+    onEmailClick,
+    onWhatsappClick,
+    onButtonProfile,
+    onFavoriteClick,
+  }: CarouselGridProfileProps = $props();
 
   const responsive = useDevice();
 </script>
@@ -21,7 +27,7 @@
 <CarouselHeader {...headerProps}>
   <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
     {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 9 }, ) as _, i (`loading-${i}`)}
+      {#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 />
@@ -36,11 +42,29 @@
       {#each items as item, i (`profile-${item.id ?? i}`)}
         {#if responsive.isMobile}
           <Carousel.Item class="pl-2 basis-auto">
-            <CardProfile {...item} {variant} />
+            <CardProfile
+              {...item}
+              {variant}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+              {onEmailClick}
+              {onWhatsappClick}
+              {onButtonProfile}
+              {onFavoriteClick}
+            />
           </Carousel.Item>
         {:else}
           <div>
-            <CardProfile {...item} {variant} />
+            <CardProfile
+              {...item}
+              {variant}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+              {onEmailClick}
+              {onWhatsappClick}
+              {onButtonProfile}
+              {onFavoriteClick}
+            />
           </div>
         {/if}
       {/each}

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte.d.ts

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

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

@@ -27,7 +27,7 @@
   >
     {#if isLoading}
       {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-2 w-75 basis-auto">
+        <Carousel.Item class="pl-5 w-75 basis-auto">
           <CardPromotion
             id={i}
             {isLoading}

package/dist/components/types.d.ts

@@ -0,0 +1,6 @@
+export type NegoDesignProps = {
+    /** Custom translations per language. Merged with the library's base translations. */
+    translations?: Record<string, Record<string, string>>;
+    /** Conteúdo da aplicação */
+    children?: any;
+};

package/dist/components/types.js

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

package/dist/globals.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@charset "UTF-8";
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -7,9 +8,11 @@
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-800: oklch(44.4% 0.177 26.899);
     --color-red-900: oklch(39.6% 0.141 25.723);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
@@ -539,6 +542,12 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .-mb-1 {
+    margin-bottom: calc(var(--spacing) * -1);
+  }
+  .-mb-2 {
+    margin-bottom: calc(var(--spacing) * -2);
+  }
   .-mb-8 {
     margin-bottom: calc(var(--spacing) * -8);
   }
@@ -1437,6 +1446,9 @@
   .rounded-tr-lg {
     border-top-right-radius: var(--radius);
   }
+  .rounded-br-lg {
+    border-bottom-right-radius: var(--radius);
+  }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius);
   }
@@ -2999,6 +3011,9 @@
         background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
+    .hover\:bg-green-600:hover {
+      background-color: var(--color-green-600);
+    }
     .hover\:bg-input\/50:hover {
       background-color: var(--input);
     }
@@ -3037,6 +3052,9 @@
         background-color: color-mix(in oklab, var(--primary) 80%, transparent);
       }
     }
+    .hover\:bg-red-800:hover {
+      background-color: var(--color-red-800);
+    }
     .hover\:bg-secondary\/80:hover {
       background-color: var(--secondary);
     }
@@ -3835,9 +3853,15 @@
     .md\:flex {
       display: flex;
     }
+    .md\:h-14 {
+      height: calc(var(--spacing) * 14);
+    }
     .md\:h-20 {
       height: calc(var(--spacing) * 20);
     }
+    .md\:h-32\.5 {
+      height: calc(var(--spacing) * 32.5);
+    }
     .md\:h-50 {
       height: calc(var(--spacing) * 50);
     }
@@ -3865,6 +3889,9 @@
     .md\:w-11\/12 {
       width: calc(11 / 12 * 100%);
     }
+    .md\:w-14 {
+      width: calc(var(--spacing) * 14);
+    }
     .md\:w-20 {
       width: calc(var(--spacing) * 20);
     }
@@ -4009,15 +4036,24 @@
     .lg\:block {
       display: block;
     }
+    .lg\:h-20 {
+      height: calc(var(--spacing) * 20);
+    }
     .lg\:h-24 {
       height: calc(var(--spacing) * 24);
     }
+    .lg\:h-44 {
+      height: calc(var(--spacing) * 44);
+    }
     .lg\:h-105 {
       height: calc(var(--spacing) * 105);
     }
     .lg\:h-225 {
       height: calc(var(--spacing) * 225);
     }
+    .lg\:w-20 {
+      width: calc(var(--spacing) * 20);
+    }
     .lg\:w-32 {
       width: calc(var(--spacing) * 32);
     }
@@ -4033,6 +4069,9 @@
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+    .lg\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
     .lg\:grid-cols-\[1fr_22rem\] {
       grid-template-columns: 1fr 22rem;
     }
@@ -4056,6 +4095,14 @@
     .xl\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
+    .xl\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  @media (width >= 96rem) {
+    .\32 xl\:grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
   }
   .ltr\:fill-current:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
     fill: currentcolor;

package/dist/styles/globals.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn-svelte/tailwind.css";
@@ -146,4 +148,4 @@
   html {
     @apply font-sans;
   }
-}
+}

package/dist/types/index.d.ts

@@ -6,8 +6,8 @@ import type { NavMenuLinksProps, NavMenuLogoProps, NavMenuActionsProps, NavMenuP
 import type { NavMenuSidebarProps, NavMenuAndSubmenuSidebarProps, GroupMenuSidebarProps, SubMenuSidebarProps, NavMenuItem } from "../components/core/nav/data/nav-menu-sidebar";
 import type { NavUserSidebarProps } from "../components/core/nav/data/nav-user-sidebar";
 import type { CardMediaProps, CardProfileProps, CardPromotionProps, CardHighlightProps, CardTagsProps } from "../components/core/card/types";
-import type { CarouselMediaProps } from "../components/core/carousel/grid/media/types";
-import type { CarouselProfileProps } from "../components/core/carousel/grid/profile/types";
+import type { CarouselGridMediaProps } from "../components/core/carousel/grid/media/types";
+import type { CarouselGridProfileProps } from "../components/core/carousel/grid/profile/types";
 import type { CarouselHighlightsProps } from "../components/core/carousel/highlights/types";
 import type { CarouselPromotionProps } from "../components/core/carousel/promotion/types";
 import type { ItemCarousel, CarouselHeaderProps, CarouselBadgeProps, CarouselHeroItem, CarouselHeroProps } from "../components/core/carousel/types";
@@ -24,26 +24,7 @@ import type { ProfileUserProps, ProfileUserData, ProfileUserVariant, ProfileUser
 import type { ProductDetailsProps, ProductDetailsData, ProductDetailsBreadcrumbItem, ProductDetailsTag, ProductDetailsImage, ProductDetailsLocation, ProductDetailsReview, ProductDetailsTab } from "../components/pages/product-details/types";
 import type { PrivacyPolicyOrTermsOfUseProps, DocPageData, DocSection, ContentBlock, BreadcrumbItem, TocItem } from "../components/pages/privacy-policy-or-terms-of-use/types";
 import type { InputLabelProps } from "../components/core/form/data/InputLabel.svelte";
-export interface NegoDesignProps {
-    /** Custom translations per language. Merged with the library's base translations. */
-    translations?: Record<string, Record<string, string>>;
-    /** Conteúdo da aplicação */
-    children?: any;
-}
-export type InputEmailProps = InputLabelProps;
-export type InputPhoneProps = InputLabelProps;
-export type InputEmailOrPhoneProps = InputLabelProps;
-export interface InputCodeOtpProps extends InputLabelProps {
-    /** Number of OTP code boxes. Default: 6 */
-    length?: number;
-    /** Show separator between groups. Default: true */
-    separator?: boolean;
-}
-export type InputPasswordProps = InputLabelProps;
-export type InputUsernameProps = InputLabelProps;
-export type InputPasswordConfirmProps = InputLabelProps;
-export type CarouselGridMediaProps = CarouselMediaProps;
-export type CarouselGridProfileProps = CarouselProfileProps;
+import type { NegoDesignProps } from "../components/types";
 export type { 
 /** Props de um link individual no menu de navegação. @see NavMenuLinksProps */
 NavMenuLinksProps, 
@@ -87,10 +68,10 @@ CarouselBadgeProps,
 CarouselHeroItem, 
 /** Props do CarouselHero — carousel hero principal com menu sobreposto. @see CarouselHeroProps */
 CarouselHeroProps, 
-/** Props do CarouselGridMedia — layout em grid de cards de mídia (img/vídeo). @see CarouselMediaProps */
-CarouselMediaProps, 
-/** Props do CarouselGridProfile — grid de cards de perfil (guias, organizações). @see CarouselProfileProps */
-CarouselProfileProps, 
+/** Props do CarouselGridMedia — layout em grid de cards de mídia (img/vídeo). @see CarouselGridMediaProps */
+CarouselGridMediaProps, 
+/** Props do CarouselGridProfile — grid de cards de perfil (guias, organizações). @see CarouselGridProfileProps */
+CarouselGridProfileProps, 
 /** Props do CarouselHighlights — carousel de cards de destaque/organizações. @see CarouselHighlightsProps */
 CarouselHighlightsProps, 
 /** Props do CarouselPromotion — carousel de cards de promoção com preços. @see CarouselPromotionProps */
@@ -171,20 +152,6 @@ ProfileUserData,
 ProfileUserProps, 
 /** Props do NegoDesign — componente raiz do Negodesign. */
 NegoDesignProps, 
-/** Props do input de email. @see InputLabelProps */
-InputEmailProps, 
-/** Props do input de telefone. @see InputLabelProps */
-InputPhoneProps, 
-/** Props do input híbrido email ou telefone. @see InputLabelProps */
-InputEmailOrPhoneProps, 
-/** Props do input de código OTP. */
-InputCodeOtpProps, 
-/** Props do input de password. @see InputLabelProps */
-InputPasswordProps, 
-/** Props do input de nome de utilizador. @see InputLabelProps */
-InputUsernameProps, 
-/** Props do input de confirmação de password. @see InputLabelProps */
-InputPasswordConfirmProps, 
 /** Props base para inputs de formulário com label. */
 InputLabelProps, 
 /** Item individual do breadcrumb do ProductDetails. @see ProductDetailsBreadcrumbItem */
@@ -214,8 +181,4 @@ DocPageData,
 /** Item da tabela de conteúdos (TOC). @see TocItem */
 TocItem, 
 /** Props do componente PrivacyPolicyOrTermsOfUse. @see PrivacyPolicyOrTermsOfUseProps */
-PrivacyPolicyOrTermsOfUseProps, 
-/** Alias para CarouselMediaProps — props do componente CarouselGridMedia. @see CarouselMediaProps */
-CarouselGridMediaProps, 
-/** Alias para CarouselProfileProps — props do componente CarouselGridProfile. @see CarouselProfileProps */
-CarouselGridProfileProps };
+PrivacyPolicyOrTermsOfUseProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "negodesign",
-	"version": "0.0.31",
+	"version": "0.0.33",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [