negodesign 0.0.32 → 0.0.34

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,9 @@
   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";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
 
   let {
     id,
@@ -24,93 +27,110 @@
     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"
+              onerror={(e) =>
+                ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+            />
+          {/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}
+        lines={tags?.length == 0 ? 3 : 2}
       />
     </div>
-  </div>
 
-  <div class="h-15 my-2">
-    <CardDescription {content} {isLoading} />
-  </div>
+    <CardTags
+      className="my-4"
+      tags={tags ?? []}
+      {isTagBorderBottom}
+      {isLoading}
+    />
 
-  <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,10 @@
   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";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
+
   let {
     id,
     tags,
@@ -24,45 +28,56 @@
     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 imageUrl}
+            <img
+              src={imageUrl}
+              alt={imageUrl}
+              class="w-12 h-12 rounded-lg"
+              onerror={(e) =>
+                ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+            />
+          {/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 +85,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/CardProfile.svelte

@@ -2,7 +2,7 @@
   import type { CardProfileProps } from "../types";
   import CardProfile01 from "./01/CardProfile01.svelte";
   import CardProfile02 from "./02/CardProfile02.svelte";
-
+  
   type Props = {
     variant?: 1 | 2;
     isLoading?: boolean;

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

@@ -6,6 +6,7 @@
   import Skeleton from "../../../ui/skeleton/skeleton.svelte";
 
   type CardDescriptionProps = {
+    lines?: number;
     content?: string;
     isLoading?: boolean;
     isDescriptionIcon?: boolean;
@@ -13,9 +14,10 @@
   };
 
   let {
+    lines = 2,
     content,
     isLoading = false,
-    isDescriptionIcon = true,
+    isDescriptionIcon = false,
     isDescriptionLabel = true,
   }: CardDescriptionProps = $props();
 </script>
@@ -27,12 +29,13 @@
     <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"
+    {lines}
+    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/CardDescription.svelte.d.ts

@@ -1,4 +1,5 @@
 type CardDescriptionProps = {
+    lines?: number;
     content?: string;
     isLoading?: boolean;
     isDescriptionIcon?: boolean;

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

@@ -0,0 +1,38 @@
+<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 {isFlex
+        ? 'rounded-br-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 {isFlex
+        ? 'rounded-bl-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/shared/CardTags.svelte

@@ -12,7 +12,7 @@
   };
 
   const {
-    tags,
+    tags = [],
     className,
     isTagBorderBottom,
     isWrap = false,
@@ -55,7 +55,7 @@
   </div>
 {:else}
   <div
-    class="flex overflow-x-auto no-scrollbar w-full
+    class="flex overflow-x-auto no-scrollbar w-full min-w-0
         {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
         {className}"
   >

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

@@ -1,56 +1,48 @@
 <!-- shared/TruncatableText.svelte -->
 <script lang="ts">
-    /**
-     * Clamps text to N lines; if it overflows, shows an indicator
-     * ("Ler texto completo") positioned absolutely at the end of the
-     * text, that opens the full text in a Popover.
-     * @component
-     */
-    import * as Popover from "../../../ui/popover";
-    import { t } from "../../../../i18n";
+  /**
+   * Clamps text to N lines; if it overflows, shows an indicator
+   * ("Ler texto completo") positioned absolutely at the end of the
+   * text, that opens the full text in a Popover.
+   * @component
+   */
+  import * as Popover from "../../../ui/popover";
+  import { t } from "../../../../i18n";
 
-    type Props = { text: string; class?: string; lines?: 2 | 3 | 4 };
-    let { text, class: className = "", lines = 2 }: Props = $props();
+  type Props = { text: string; class?: string; lines?: number };
+  let { text, class: className = "", lines = 2 }: Props = $props();
 
-    // Tailwind precisa de classes literais no código-fonte para as gerar —
-    // "line-clamp-{lines}" interpolado nunca é detectado pelo scanner.
-    const clampClasses = {
-        2: "line-clamp-2",
-        3: "line-clamp-3",
-        4: "line-clamp-4",
-    } as const;
+  let textEl: HTMLParagraphElement | undefined = $state();
+  let isTruncated = $state(false);
 
-    let textEl: HTMLParagraphElement | undefined = $state();
-    let isTruncated = $state(false);
-
-    $effect(() => {
-        if (!textEl) return;
-        const check = () =>
-            (isTruncated = textEl!.scrollHeight > textEl!.clientHeight + 1);
-        // requestAnimationFrame garante que o layout com o clamp já foi aplicado
-        // antes de medirmos — medir no mesmo tick pode dar valores desatualizados.
-        requestAnimationFrame(check);
-        const ro = new ResizeObserver(check);
-        ro.observe(textEl);
-        return () => ro.disconnect();
-    });
+  $effect(() => {
+    if (!textEl) return;
+    const check = () =>
+      (isTruncated = textEl!.scrollHeight > textEl!.clientHeight + 1);
+    // requestAnimationFrame garante que o layout com o clamp já foi aplicado
+    // antes de medirmos — medir no mesmo tick pode dar valores desatualizados.
+    requestAnimationFrame(check);
+    const ro = new ResizeObserver(check);
+    ro.observe(textEl);
+    return () => ro.disconnect();
+  });
 </script>
 
 <div class="relative">
-    <p bind:this={textEl} class="{clampClasses[lines]} {className}">
-        {text}
-    </p>
+  <p bind:this={textEl} class="line-clamp-{lines} {className}">
+    {text}
+  </p>
 
-    {#if isTruncated}
-        <Popover.Root>
-            <Popover.Trigger
-                class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
-            >
-                {$t("label.view.full")}
-            </Popover.Trigger>
-            <Popover.Content>
-                <p class="max-w-xs text-justify text-[12px]">{text}</p>
-            </Popover.Content>
-        </Popover.Root>
-    {/if}
-</div>
+  {#if isTruncated}
+    <Popover.Root>
+      <Popover.Trigger
+        class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
+      >
+        {$t("label.view.full")}
+      </Popover.Trigger>
+      <Popover.Content>
+        <p class="max-w-xs text-justify text-[12px]">{text}</p>
+      </Popover.Content>
+    </Popover.Root>
+  {/if}
+</div>

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

@@ -1,7 +1,7 @@
 type Props = {
     text: string;
     class?: string;
-    lines?: 2 | 3 | 4;
+    lines?: number;
 };
 declare const TruncatableText: import("svelte").Component<Props, {}, "">;
 type TruncatableText = ReturnType<typeof TruncatableText>;

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/ui/CarouselGridMedia.svelte

@@ -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/profile/types.d.ts

@@ -18,4 +18,13 @@ export interface CarouselGridProfileProps {
     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

@@ -9,10 +9,16 @@
   const {
     headerProps,
     slotProps,
-    gridClass,
+    gridClass = "lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
     items,
     variant,
     isLoading = false,
+    isDescriptionIcon = false,
+    isDescriptionLabel = false,
+    onEmailClick,
+    onWhatsappClick,
+    onButtonProfile,
+    onFavoriteClick,
   }: CarouselGridProfileProps = $props();
 
   const responsive = useDevice();
@@ -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/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/globals.css

@@ -7,9 +7,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 +541,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);
   }
@@ -585,24 +593,6 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
   }
-  .line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  .line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-  .line-clamp-4 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 4;
-  }
   .block {
     display: block;
   }
@@ -1437,6 +1427,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 +2992,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 +3033,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 +3834,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 +3870,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 +4017,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);
     }
@@ -4057,6 +4074,11 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  @media (width >= 96rem) {
+    .\32 xl\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .ltr\:fill-current:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
     fill: currentcolor;
   }
@@ -17191,7 +17213,6 @@
  *
  * Copyright (c) 2020 Animate.css
  */
-@charset "UTF-8";
 :root {
   --animate-duration: 1s;
   --animate-delay: 1s;

package/dist/styles/animate.min.css

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 /*!
  * animate.css - https://animate.style/
  * Version - 4.1.1

package/package.json

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