negodesign 0.0.38 → 0.0.39

package/dist/components/core/card/media/01/CardMedia01.svelte

@@ -23,7 +23,6 @@
     content,
     imageUrl,
     videoUrl,
-    //videoAction,
     startNumber,
     startMax = 5,
     isImageButtonMaximized = false,
@@ -33,6 +32,8 @@
     isLoading = false,
     buttonProfileClass,
     buttonDetailsClass,
+    isDescriptionIcon,
+    isDescriptionLabel,
     onFavoriteClick,
     onButtonProfile,
     onButtonDetails,
@@ -75,8 +76,13 @@
     </div>
   </div>
 
-  <div class="h-15 my-2">
-    <CardDescription {content} {isLoading} />
+  <div class="h-15 my-2 mb-5 md:mb-0">
+    <CardDescription
+      {content}
+      {isLoading}
+      {isDescriptionIcon}
+      {isDescriptionLabel}
+    />
   </div>
 
   <CardTags

package/dist/components/core/card/media/02/CardMedia02.svelte

@@ -23,7 +23,6 @@
     className,
     imageUrl,
     videoUrl,
-    //videoAction,
     startNumber,
     startMax = 5,
     isImageButtonMaximized = false,
@@ -33,6 +32,8 @@
     isLoading = false,
     buttonProfileClass,
     buttonDetailsClass,
+    isDescriptionIcon,
+    isDescriptionLabel,
     onFavoriteClick,
     onButtonProfile,
     onButtonDetails,
@@ -81,8 +82,13 @@
     />
   </div>
 
-  <div class="h-15 mb-4">
-    <CardDescription {content} {isLoading} />
+  <div class="h-15 mb-10 md:mb-0">
+    <CardDescription
+      {content}
+      {isLoading}
+      {isDescriptionIcon}
+      {isDescriptionLabel}
+    />
   </div>
 
   <CardThumbnailVideo

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

@@ -27,7 +27,7 @@
   let {
     imageUrl,
     videoUrl,
-    class: className = "w-64 h-64",
+    class: className = "h-32 md:w-64 md:h-64",
     isImageButtonMaximized = false,
     isVideoButtonMaximized = false,
     isLoading = false,

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

@@ -48,6 +48,10 @@ export interface CardMediaProps {
     isVideoButtonMaximized?: boolean;
     /** Exibe o botão de maximizar na imagem */
     isImageButtonMaximized?: boolean;
+    /** Exibe ícone antes da descrição */
+    isDescriptionIcon?: boolean;
+    /** Exibe etiqueta (label) na descrição */
+    isDescriptionLabel?: boolean;
     /** Callback acionado ao clicar no botão de favorito */
     onFavoriteClick?: (id: string | number) => void;
     /** Callback acionado ao clicar no botão de perfil */

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

@@ -12,6 +12,10 @@ export interface CarouselGridMediaProps {
     slotProps?: CarouselSlotProps;
     /** Classe CSS adicional para o container do grid */
     gridClass?: string;
+    /** Exibe ícone antes da descrição */
+    isDescriptionIcon?: boolean;
+    /** Exibe etiqueta (label) na descrição */
+    isDescriptionLabel?: boolean;
     /** Variante visual do card: 1 ou 2 */
     variant?: 1 | 2;
     /** Lista de itens de mídia para exibir nos cards */

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

@@ -15,6 +15,8 @@
     items,
     variant,
     isLoading = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
   }: CarouselGridMediaProps = $props();
 
   const responsive = useDevice();
@@ -32,7 +34,7 @@
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}
-            <Carousel.Item class="pl-2 basis-auto">
+            <Carousel.Item class="pl-2 basis-auto w-[300px]">
               <CardMedia id={i} {variant} isLoading />
             </Carousel.Item>
           {:else}
@@ -44,12 +46,22 @@
       {: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 class="pl-2 basis-auto w-[300px]">
+              <CardMedia
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+              />
             </Carousel.Item>
           {:else}
             <div>
-              <CardMedia {...item} {variant} />
+              <CardMedia
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+              />
             </div>
           {/if}
         {/each}

package/dist/components/core/panel/CarouselSlot.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import * as Carousel from "../../ui/carousel/index.js";
+  import { useDevice } from "../../../hooks/responsive.svelte";
   import type { CarouselSlotProps } from "./type";
 
   const {
@@ -14,7 +15,9 @@
 
   const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
   const styleCenter =
-    "absolute top-1/2 -translate-y-1/2 mt-0.5 mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
+    "absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
+
+  const responsive = useDevice();
 </script>
 
 <div
@@ -26,7 +29,7 @@
     >
       {@render children?.()}
     </Carousel.Content>
-    {#if positionButtonPreviousAndNext == "center"}
+    {#if positionButtonPreviousAndNext == "center" && !responsive.isMobile}
       {#if isButtonPreviousAndNext}
         <Carousel.Previous
           class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
@@ -36,14 +39,16 @@
         />
       {/if}
     {/if}
-    {#if positionButtonPreviousAndNext == "top_right"}
+    {#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
       {#if isButtonPreviousAndNext}
-        <div class="absolute -top-6 right-10 md:right-10 lg:right-12 z-20">
+        <div
+          class="absolute -top-16 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
+        >
           <Carousel.Previous
             class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
           />
           <Carousel.Next
-            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+            class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
           />
         </div>
       {/if}

package/dist/components/pages/product-details/shared/ProductDetailPrice.svelte

@@ -39,6 +39,6 @@
   <Skeleton class="h-7 w-28 rounded-md" />
 {:else if formatted || oldPrice}
   <div class="flex items-end gap-3">
-    <CardStartPrice newPrice={formatted} oldPrice={oldPrice} />
+    <CardStartPrice newPrice={formatted} {oldPrice} />
   </div>
 {/if}

package/dist/globals.css

@@ -297,12 +297,12 @@
   .end-2 {
     inset-inline-end: calc(var(--spacing) * 2);
   }
-  .-top-6 {
-    top: calc(var(--spacing) * -6);
-  }
   .-top-12 {
     top: calc(var(--spacing) * -12);
   }
+  .-top-16 {
+    top: calc(var(--spacing) * -16);
+  }
   .top-0 {
     top: 0px;
   }
@@ -351,8 +351,8 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
-  .right-10 {
-    right: calc(var(--spacing) * 10);
+  .right-8 {
+    right: calc(var(--spacing) * 8);
   }
   .-bottom-12 {
     bottom: calc(var(--spacing) * -12);
@@ -552,9 +552,6 @@
   .-mr-2 {
     margin-right: calc(var(--spacing) * -2);
   }
-  .mr-0 {
-    margin-right: 0px;
-  }
   .mr-0\.5 {
     margin-right: calc(var(--spacing) * 0.5);
   }
@@ -814,9 +811,6 @@
   .h-50 {
     height: calc(var(--spacing) * 50);
   }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
@@ -979,9 +973,6 @@
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
-  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -3980,6 +3971,9 @@
     }
   }
   @media (width >= 48rem) {
+    .md\:-top-10 {
+      top: calc(var(--spacing) * -10);
+    }
     .md\:right-6 {
       right: calc(var(--spacing) * 6);
     }
@@ -4001,9 +3995,15 @@
     .md\:mt-10 {
       margin-top: calc(var(--spacing) * 10);
     }
+    .md\:mr-0 {
+      margin-right: 0px;
+    }
     .md\:-mb-10 {
       margin-bottom: calc(var(--spacing) * -10);
     }
+    .md\:mb-0 {
+      margin-bottom: 0px;
+    }
     .md\:block {
       display: block;
     }
@@ -4031,6 +4031,9 @@
     .md\:h-50 {
       height: calc(var(--spacing) * 50);
     }
+    .md\:h-64 {
+      height: calc(var(--spacing) * 64);
+    }
     .md\:h-100 {
       height: calc(var(--spacing) * 100);
     }
@@ -4064,6 +4067,9 @@
     .md\:w-25 {
       width: calc(var(--spacing) * 25);
     }
+    .md\:w-64 {
+      width: calc(var(--spacing) * 64);
+    }
     .md\:w-225 {
       width: calc(var(--spacing) * 225);
     }

package/package.json

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