negodesign 0.0.53 → 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>

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

@@ -27,7 +27,7 @@
   {#each links as item (item.label)}
     <li>
       <a
-        class={`flex items-center gap-1 ${linkClass} ${menuKey === item.key ? activeClass : ""}`}
+        class={`flex items-center gap-1 ${linkClass} ${item.key && menuKey === item.key ? activeClass : ""}`}
         href={item.url ?? item.href ?? "#"}
       >
         {#if item.icon}

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);
   }
@@ -1225,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));
   }
@@ -1473,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;
@@ -1710,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);
   }
@@ -1749,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);
   }
@@ -1913,9 +1920,6 @@
   .p-0 {
     padding: 0px;
   }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
   .p-1 {
     padding: var(--spacing);
   }
@@ -2033,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);
   }
@@ -2057,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);
   }
@@ -3231,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);
     }
@@ -4005,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);
     }
@@ -4059,6 +4081,9 @@
     .md\:w-25 {
       width: calc(var(--spacing) * 25);
     }
+    .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.53",
+	"version": "0.0.54",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [