negodesign 0.0.52 → 0.0.54

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

@@ -56,13 +56,13 @@
         {#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" />
+          <Skeleton class="w-5 md: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" />
+          <Skeleton class="w-5 md:w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
         {/if}
       </div>
     </div>
@@ -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/badge/ui/CarouselBadge.svelte

@@ -10,16 +10,23 @@
     imageClass,
     iconClass,
     labelClass,
-    activeClass = "bg-gradient text-white rounded-sm px-3",
-    isLoading = false,
+    activeClass = "bg-gradient text-white rounded-full px-3",
     orientation = "horizontal",
+    itemStyle = "DEFAULT",
+    isBorderInline = false,
+    showButton = true,
+    isLoading = false,
+    btnNavClass,
     itemClass,
     onClick,
   }: CarouselBadgeProps = $props();
 
-  const DEFAULT_IMG_OR_ICON_CLASS = "size-3";
-  const NAV_BUTTON_CLASS =
-    "absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
+  const TOP_NAV = $derived(isBorderInline ? "top-5.5" : "top-7.5");
+  const borderB = $derived(
+    isBorderInline ? `border-b-2 ${itemStyle == "BORDER" ? "pb-2" : ""}` : "",
+  );
+  const isInlineBorder = $derived(isBorderInline && itemStyle == "INLINE");
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-3 md:size-6";
 
   const responsive = useDevice();
   const skeletonCount = $derived(responsive.isMobile ? 2 : 8);
@@ -54,31 +61,49 @@
   {/if}
 {/snippet}
 
-<Carousel.Root>
-  <Carousel.Content>
-    {#if isLoading}
-      <div class="flex items-center justify-between w-full gap-1 md:gap-2">
-        {#each Array.from({ length: skeletonCount }) as _, i (`skeleton-${i}`)}
-          <Skeleton class="h-4 w-25 bg-gray-900/90" />
-        {/each}
-      </div>
-    {:else}
-      {#each items as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
-        <Carousel.Item class="basis-auto" onclick={() => selectItem(item)}>
-          <div
-            class="flex gap-1 mx-2 p-0.5 justify-center items-center cursor-pointer
+{#if items.length > 0}
+  <Carousel.Root>
+    <Carousel.Content class={borderB}>
+      {#if isLoading}
+        <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+          {#each Array.from( { length: skeletonCount }, ) as _, i (`skeleton-${i}`)}
+            <Skeleton class="h-4 w-25 bg-gray-50/90" />
+          {/each}
+        </div>
+      {:else}
+        {#each items as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
+          <Carousel.Item
+            class="basis-auto relative"
+            onclick={() => selectItem(item)}
+          >
+            <div
+              class="flex gap-1 mx-2 p-1 justify-center items-center cursor-pointer relative hover:text-lg hover:font-bold
+            {isSelected(item)
+                ? isInlineBorder
+                  ? 'text-gradient font-bold'
+                  : activeClass
+                : ''} 
+            {itemStyle == 'BORDER' ? 'border-2 rounded-full min-w-25 px-1' : ''}
             {orientation === 'horizontal' ? 'flex-row' : 'flex-col'}
-            {isSelected(item) ? activeClass : ''} 
+            {isInlineBorder ? 'pb-3' : ''}
             {itemClass} 
           "
-          >
-            {@render itemVisual(item)}
-            <div class={labelClass}>{item.label}</div>
-          </div>
-        </Carousel.Item>
-      {/each}
+            >
+              {@render itemVisual(item)}
+              <div class={labelClass}>{item.label}</div>
+            </div>
+            {#if isSelected(item) && isInlineBorder}
+              <div class="absolute pt-5 w-full h-2 bg-gradient"></div>
+            {/if}
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </Carousel.Content>
+    {#if showButton}
+      {@const navClass =
+        "absolute -translate-y-1/2 z-50 bg-blue-700! text-white! cursor-pointer"}
+      <Carousel.Previous class="-left-8 {navClass} {TOP_NAV} {btnNavClass}" />
+      <Carousel.Next class="-right-8 {navClass} {TOP_NAV} {btnNavClass}" />
     {/if}
-  </Carousel.Content>
-  <Carousel.Previous class="-left-8 {NAV_BUTTON_CLASS}" />
-  <Carousel.Next class="-right-8 {NAV_BUTTON_CLASS}" />
-</Carousel.Root>
+  </Carousel.Root>
+{/if}

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/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -15,8 +15,6 @@
   const { slotProps, totalItems, gridClass, children }: Props = $props();
 
   const responsive = useDevice();
-
-  const colsClass = $derived(totalItems <= 2 ? "grid-cols-2" : "grid-cols-3");
 </script>
 
 {#if responsive.isMobile}
@@ -27,7 +25,9 @@
     {@render children()}
   </CarouselSlot>
 {:else}
-  <div class="grid {colsClass} gap-4 p-2 {gridClass}">
+  <div
+    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 p-2 {gridClass}"
+  >
     {@render children()}
   </div>
 {/if}

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

@@ -62,6 +62,10 @@ export interface CarouselBadgeProps {
     /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
     itemClass?: string;
+    btnNavClass?: string;
+    isBorderInline?: boolean;
+    showButton?: boolean;
+    itemStyle?: 'BORDER' | 'INLINE' | 'DEFAULT';
     onClick?: (value: string | number) => void;
 }
 /**

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} ${item.key && 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

@@ -329,6 +329,12 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-5\.5 {
+    top: calc(var(--spacing) * 5.5);
+  }
+  .top-7\.5 {
+    top: calc(var(--spacing) * 7.5);
+  }
   .top-8 {
     top: calc(var(--spacing) * 8);
   }
@@ -479,9 +485,6 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
-  .my-6 {
-    margin-block: calc(var(--spacing) * 6);
-  }
   .my-auto {
     margin-block: auto;
   }
@@ -813,9 +816,6 @@
   .h-75 {
     height: calc(var(--spacing) * 75);
   }
-  .h-\[50px\] {
-    height: 50px;
-  }
   .h-\[65px\] {
     height: 65px;
   }
@@ -1231,9 +1231,6 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
   .grid-cols-10 {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
@@ -1479,6 +1476,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .border-4 {
     border-style: var(--tw-border-style);
     border-width: 4px;
@@ -1716,6 +1717,12 @@
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
+  .bg-gray-50\/90 {
+    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-50) 90%, transparent);
+    }
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -1755,12 +1762,6 @@
       background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
     }
   }
-  .bg-gray-900\/90 {
-    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 90%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-gray-900) 90%, transparent);
-    }
-  }
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
@@ -1919,9 +1920,6 @@
   .p-0 {
     padding: 0px;
   }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
   .p-1 {
     padding: var(--spacing);
   }
@@ -2039,6 +2037,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -2063,6 +2064,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pb-5 {
     padding-bottom: calc(var(--spacing) * 5);
   }
@@ -3237,6 +3241,14 @@
         background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
       }
     }
+    .hover\:text-lg:hover {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+    .hover\:font-bold:hover {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
     .hover\:text-foreground:hover {
       color: var(--foreground);
     }
@@ -4011,6 +4023,10 @@
     .md\:aspect-auto {
       aspect-ratio: auto;
     }
+    .md\:size-6 {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
     .md\:h-14 {
       height: calc(var(--spacing) * 14);
     }
@@ -4065,8 +4081,8 @@
     .md\:w-25 {
       width: calc(var(--spacing) * 25);
     }
-    .md\:w-64 {
-      width: calc(var(--spacing) * 64);
+    .md\:w-40 {
+      width: calc(var(--spacing) * 40);
     }
     .md\:w-225 {
       width: calc(var(--spacing) * 225);

package/package.json

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