negodesign 0.0.52 → 0.0.53

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

@@ -76,7 +76,7 @@
     </div>
   </div>
 
-  <div class="h-15 my-2 mb-5 md:mb-0">
+  <div class=" my-2 mb-2 md:mb-0">
     <CardDescription
       {content}
       {isLoading}
@@ -86,7 +86,7 @@
   </div>
 
   <CardTags
-    className="my-6"
+    className="mt-1 mb-5"
     tags={tags ?? []}
     {isTagBorderBottom}
     {isLoading}

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

@@ -74,15 +74,10 @@
         {isLoading}
       />
     </div>
-    <CardTags
-      className="my-2"
-      tags={tags ?? []}
-      {isTagBorderBottom}
-      {isLoading}
-    />
+    <CardTags tags={tags ?? []} {isTagBorderBottom} {isLoading} />
   </div>
 
-  <div class="h-15 mb-10 md:mb-0">
+  <div class="h-24">
     <CardDescription
       {content}
       {isLoading}

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

@@ -29,10 +29,7 @@
     class="w-full h-7.5 rounded-lg bg-gray-500/80 dark:bg-gray-500/30"
   />
 {:else}
-  <Button
-    class="bg-gradient {isFlex ? 'flex-1' : ''} {className}"
-    onclick={() => onClick(id)}
-  >
+  <Button class="bg-gradient flex-1 {className}" onclick={() => onClick(id)}>
     {#if icon}
       {#if typeof icon === "string"}
         <i class={icon}></i>

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

@@ -77,7 +77,7 @@
   <Popover.Trigger
     onmouseenter={() => (open = true)}
     onmouseleave={() => (open = false)}
-    class="block w-full text-left"
+    class="block w-full text-left h-8"
   >
     {@render tagsRow()}
   </Popover.Trigger>

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

@@ -27,7 +27,7 @@
   let {
     imageUrl,
     videoUrl,
-    class: className = "h-32 md:w-64 md:h-64",
+    class: className = "h-32 w-full md:h-64",
     isImageButtonMaximized = false,
     isVideoButtonMaximized = false,
     isLoading = false,
@@ -130,16 +130,10 @@
           loading="lazy"
           decoding="async"
           alt={imageUrl}
-          class="absolute inset-0 w-full {className} rounded-md object-cover transition-opacity duration-500"
+          class="absolute inset-0 h-full w-full rounded-md object-cover transition-opacity duration-500"
           class:opacity-0={videoUrl && showVideo}
           onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
         />
-      {:else}
-        <img
-          src={ImgPlaceholder}
-          alt={imageUrl}
-          class="rounded-lg w-50 h-[50px] object-cover object-center"
-        />
       {/if}
 
       {#if videoUrl && isVisible}
@@ -148,7 +142,7 @@
           src={videoUrl}
           preload="metadata"
           onloadedmetadata={onLoadedMetadata}
-          class="absolute inset-0 w-full {className} rounded-md object-cover transition-opacity duration-500"
+          class="absolute inset-0 h-full w-full rounded-md object-cover transition-opacity duration-500"
           class:opacity-0={imageUrl && !showVideo}
           muted
           loop

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

@@ -22,6 +22,10 @@ export interface CarouselGridMediaProps {
     items: CardMediaProps[];
     /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    /** Exibe o botão de maximizar no vídeo */
+    isVideoButtonMaximized?: boolean;
+    /** Exibe o botão de maximizar na imagem */
+    isImageButtonMaximized?: 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/ui/CarouselGridMedia.svelte

@@ -17,6 +17,8 @@
     isLoading = false,
     isDescriptionIcon,
     isDescriptionLabel,
+    isVideoButtonMaximized = false,
+    isImageButtonMaximized = false,
     onFavoriteClick,
     onButtonProfile,
     onButtonDetails,
@@ -55,18 +57,11 @@
                 {variant}
                 {isDescriptionIcon}
                 {isDescriptionLabel}
-                onFavoriteClick={(id: string | number) => {
-                  item?.onFavoriteClick?.(id);
-                  onFavoriteClick?.(id);
-                }}
-                onButtonProfile={(id: string | number) => {
-                  item?.onButtonProfile?.(id);
-                  onButtonProfile?.(id);
-                }}
-                onButtonDetails={(id: string | number) => {
-                  item?.onButtonDetails?.(id);
-                  onButtonDetails?.(id);
-                }}
+                {isVideoButtonMaximized}
+                {isImageButtonMaximized}
+                {onFavoriteClick}
+                {onButtonProfile}
+                {onButtonDetails}
               />
             </Carousel.Item>
           {:else}
@@ -76,18 +71,11 @@
                 {variant}
                 {isDescriptionIcon}
                 {isDescriptionLabel}
-                onFavoriteClick={(id: string | number) => {
-                  item?.onFavoriteClick?.(id);
-                  onFavoriteClick?.(id);
-                }}
-                onButtonProfile={(id: string | number) => {
-                  item?.onButtonProfile?.(id);
-                  onButtonProfile?.(id);
-                }}
-                onButtonDetails={(id: string | number) => {
-                  item?.onButtonDetails?.(id);
-                  onButtonDetails?.(id);
-                }}
+                {isVideoButtonMaximized}
+                {isImageButtonMaximized}
+                {onFavoriteClick}
+                {onButtonProfile}
+                {onButtonDetails}
               />
             </div>
           {/if}

package/dist/components/core/nav/data/nav-menu.d.ts

@@ -18,6 +18,8 @@ export interface NavMenuLogoProps {
  * Props de um link individual no menu de navegação.
  */
 export interface NavMenuLinksProps {
+    /** Key menu */
+    key?: string;
     /** URL de destino do link */
     url?: string;
     /** Alias de `url` — URL de destino do link (compatibilidade) */
@@ -52,6 +54,10 @@ export interface NavMenuActionsProps {
  * com logo, links, ações (login/registo), language switcher e light switch.
  */
 export interface NavMenuProps {
+    /** Key nav menu */
+    menuKey?: string;
+    /** Key CSS nav menu */
+    activeClass?: string;
     /** Classe CSS adicional para o container do nav */
     navClass?: string;
     /** Classe CSS personalizada para cada link */

package/dist/components/core/nav/ui/menu-links.svelte

@@ -1,28 +1,40 @@
 <script lang="ts">
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { NavMenuLinksProps } from "../data/nav-menu";
-    
-    type Props = {
-        links: NavMenuLinksProps[];
-        linkClass?: string;
-        groupClass?: string;
-        orientation?: "horizontal" | "vertical";
-    };
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { NavMenuLinksProps } from "../data/nav-menu";
 
-    let { links, linkClass, groupClass, orientation }: Props = $props();        
+  type Props = {
+    links: NavMenuLinksProps[];
+    linkClass?: string;
+    groupClass?: string;
+    menuKey?: string;
+    activeClass?: string;
+    orientation?: "horizontal" | "vertical";
+  };
+
+  let {
+    links,
+    linkClass,
+    groupClass,
+    menuKey,
+    activeClass = "bg-gradient text-white",
+    orientation,
+  }: Props = $props();
 </script>
-    <ul class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"}  gap-2 md:gap-5 lg:gap-15 ${groupClass}`}>
-        {#each links as item (item.label)}
-            <li>
-                <a
-                    class={`flex items-center gap-1 ${linkClass}`}
-                    href={item.url ?? item.href ?? "#"}
-                >
-                    {#if item.icon}
-                        <HugeiconsIcon icon={item.icon} size={15} />
-                    {/if}
-                    {item.label}
-                </a>
-            </li>
-        {/each}
-    </ul>
+
+<ul
+  class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"}  gap-2 md:gap-5 lg:gap-15 ${groupClass}`}
+>
+  {#each links as item (item.label)}
+    <li>
+      <a
+        class={`flex items-center gap-1 ${linkClass} ${menuKey === item.key ? activeClass : ""}`}
+        href={item.url ?? item.href ?? "#"}
+      >
+        {#if item.icon}
+          <HugeiconsIcon icon={item.icon} size={15} />
+        {/if}
+        {item.label}
+      </a>
+    </li>
+  {/each}
+</ul>

package/dist/components/core/nav/ui/menu-links.svelte.d.ts

@@ -3,6 +3,8 @@ type Props = {
     links: NavMenuLinksProps[];
     linkClass?: string;
     groupClass?: string;
+    menuKey?: string;
+    activeClass?: string;
     orientation?: "horizontal" | "vertical";
 };
 declare const MenuLinks: import("svelte").Component<Props, {}, "">;

package/dist/components/core/nav/ui/nav-menu.svelte

@@ -14,6 +14,8 @@
     logo,
     links,
     actions,
+    menuKey,
+    activeClass,
     navClass = "w-full",
     linkClass = "",
     groupClass = "",
@@ -95,11 +97,25 @@
   {#if responsive.isMobile}
     <NavMenuDrawer {links} {onclickButtonLogin} {onclickButtonRegister} />
   {:else if align === "LINK_SEPARATED_ACTIONS"}
-    <MenuLinks {links} {linkClass} {groupClass} orientation="horizontal" />
+    <MenuLinks
+      {menuKey}
+      {activeClass}
+      {links}
+      {linkClass}
+      {groupClass}
+      orientation="horizontal"
+    />
     {@render actionButtons()}
   {:else if align === "LINK_INTO_ACTIONS"}
     <div class="flex items-center gap-2">
-      <MenuLinks {links} {linkClass} {groupClass} orientation="vertical" />
+      <MenuLinks
+        {menuKey}
+        {activeClass}
+        {links}
+        {linkClass}
+        {groupClass}
+        orientation="vertical"
+      />
       {@render actionButtons()}
     </div>
   {/if}

package/dist/globals.css

@@ -479,9 +479,6 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
-  .my-6 {
-    margin-block: calc(var(--spacing) * 6);
-  }
   .my-auto {
     margin-block: auto;
   }
@@ -813,9 +810,6 @@
   .h-75 {
     height: calc(var(--spacing) * 75);
   }
-  .h-\[50px\] {
-    height: 50px;
-  }
   .h-\[65px\] {
     height: 65px;
   }
@@ -4065,9 +4059,6 @@
     .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.52",
+	"version": "0.0.53",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [