negodesign 0.0.33 → 0.0.34

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

@@ -14,6 +14,7 @@
   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,
@@ -56,6 +57,8 @@
               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>
@@ -91,24 +94,16 @@
         {isLoading}
         {isDescriptionIcon}
         {isDescriptionLabel}
+        lines={tags?.length == 0 ? 3 : 2}
       />
     </div>
 
-    {#if tags}
-      <CardTags
-        className="my-4"
-        tags={tags ?? []}
-        {isTagBorderBottom}
-        {isLoading}
-      />
-    {:else}
-      <CardTags
-        className="my-4"
-        tags={[{ text: "- - -" }]}
-        {isTagBorderBottom}
-        {isLoading}
-      />
-    {/if}
+    <CardTags
+      className="my-4"
+      tags={tags ?? []}
+      {isTagBorderBottom}
+      {isLoading}
+    />
 
     <CardThumbnailVideo
       {imageUrl}

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

@@ -14,6 +14,8 @@
   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,
@@ -49,8 +51,14 @@
         <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" />
+          {: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">

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/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,6 +14,7 @@
   };
 
   let {
+    lines = 2,
     content,
     isLoading = false,
     isDescriptionIcon = false,
@@ -33,6 +35,7 @@
   {/if}
   <TruncatableText
     text={content}
+    {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

@@ -12,7 +12,9 @@
 <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"
+      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} />
@@ -24,7 +26,9 @@
   {/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"
+      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} />

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/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -9,7 +9,7 @@
   const {
     headerProps,
     slotProps,
-    gridClass = "lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+    gridClass = "lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
     items,
     variant,
     isLoading = false,

package/dist/globals.css

@@ -1,5 +1,4 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@charset "UTF-8";
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -594,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;
   }
@@ -4069,9 +4050,6 @@
     .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;
     }
@@ -4095,13 +4073,10 @@
     .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));
+    .\32 xl\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
     }
   }
   .ltr\:fill-current:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
@@ -17238,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/dist/styles/globals.css

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

package/package.json

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