negodesign 0.0.39 → 0.0.40

package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte

@@ -2,7 +2,6 @@
   import * as Carousel from "../../../../ui/carousel/index.js";
   import type { CarouselBadgeProps } from "../../types.js";
   import { HugeiconsIcon } from "@hugeicons/svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
   import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
   import { useDevice } from "../../../../../hooks/responsive.svelte";
 
@@ -11,72 +10,72 @@
     imageClass,
     iconClass,
     labelClass,
-    activeClass,
-    valueActive,
+    activeClass = "bg-gradient text-white rounded-sm px-3",
     isLoading = false,
-    itemCarouselClass,
     orientation = "horizontal",
-    isBorderItem = false,
-    isBorderBottom = false,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
+    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 responsive = useDevice();
+  const skeletonCount = $derived(responsive.isMobile ? 2 : 8);
+
+  let selectedValue = $state<unknown>(undefined);
+
+  function isSelected(item: (typeof items)[number]) {
+    return item.value !== undefined && item.value === selectedValue;
+  }
+
+  function selectItem(item: (typeof items)[number]) {
+    selectedValue = item.value;
+    item.onClick?.(item.value);
+    onClick?.(item.value);
+  }
 </script>
 
-<CarouselSlot
-  {isBorderBottom}
-  {isButtonPreviousAndNext}
-  {buttonPreviousAndNextClass}
->
-  {#if isLoading}
-    <div class="flex items-center justify-between w-full gap-1 md:gap-2">
-      {#each Array.from({ length: responsive.isMobile ? 2 : 10 }) as _, i (`skeleton-${i}`)}
-        <Skeleton class="h-4 w-25 bg-black/20" />
-      {/each}
-    </div>
-  {:else}
-    {#each (items ?? []) as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
-      <Carousel.Item
-        onclick={() => item.onClick?.(item.value)}
-        class={`
-          flex cursor-pointer items-center justify-center gap-1 basis-auto mx-3 pl-0
-          ${isBorderItem ? "border border-solid border-gray-300 rounded-lg" : ""} 
-          ${item.value === valueActive ? activeClass : ""}
-          ${itemCarouselClass}`}
-      >
-        <div
-          class={`
-              flex gap-1 mx-2 p-0.5 justify-center items-center
-               ${orientation === "horizontal" ? "flex-row" : "flex-col"}
-          `}
-        >
-          {#if item.image}
-            <img
-              src={item.image}
-              alt={item.label}
-              class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
-            />
-          {:else if item.icon}
-            {#if typeof item.icon === "string"}
-              <div>
-                <i
-                  class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}
-                >
-                </i>
-              </div>
-            {:else}
-              <HugeiconsIcon
-                icon={item.icon}
-                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
-              />
-            {/if}
-          {/if}
-          <div class={`${labelClass}`}>{item.label}</div>
-        </div>
-      </Carousel.Item>
-    {/each}
+{#snippet itemVisual(item: (typeof items)[number])}
+  {#if item.image}
+    <img
+      src={item.image}
+      alt={item.label}
+      class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+    />
+  {:else if typeof item.icon === "string"}
+    <i class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}></i>
+  {:else if item.icon}
+    <HugeiconsIcon
+      icon={item.icon}
+      class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+    />
   {/if}
-</CarouselSlot>
+{/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
+            {orientation === 'horizontal' ? 'flex-row' : 'flex-col'}
+            {isSelected(item) ? activeClass : ''}"
+          >
+            {@render itemVisual(item)}
+            <div class={labelClass}>{item.label}</div>
+          </div>
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </Carousel.Content>
+  <Carousel.Previous class="-left-8 {NAV_BUTTON_CLASS}" />
+  <Carousel.Next class="-right-8 {NAV_BUTTON_CLASS}" />
+</Carousel.Root>

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

@@ -59,20 +59,9 @@ export interface CarouselBadgeProps {
     labelClass?: string;
     /** Classe CSS personalizada para o estado ativo */
     activeClass?: string;
-    /** Valor do item ativo por padrão */
-    valueActive?: string;
     /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
-    /** Exibe borda em cada item */
-    isBorderItem?: boolean;
-    /** Exibe borda inferior no container */
-    isBorderBottom?: boolean;
-    /** Classe CSS adicional para cada item do carousel */
-    itemCarouselClass?: string;
-    /** Exibe botões anterior/próximo */
-    isButtonPreviousAndNext?: boolean;
-    /** Classe CSS personalizada para botões anterior/próximo */
-    buttonPreviousAndNextClass?: string;
+    onClick?: (value: string | number) => void;
 }
 /**
  * Item individual do CarouselHero — slide com imagem,

package/dist/globals.css

@@ -17,7 +17,6 @@
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-700: oklch(48.8% 0.243 264.376);
-    --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-slate-400: oklch(70.4% 0.04 256.788);
     --color-slate-500: oklch(55.4% 0.046 257.417);
@@ -462,9 +461,6 @@
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
-  .mx-3 {
-    margin-inline: calc(var(--spacing) * 3);
-  }
   .mx-3\.5 {
     margin-inline: calc(var(--spacing) * 3.5);
   }
@@ -1528,10 +1524,6 @@
     --tw-border-style: none;
     border-style: none;
   }
-  .border-solid {
-    --tw-border-style: solid;
-    border-style: solid;
-  }
   .border-\(--color-border\) {
     border-color: var(--color-border);
   }
@@ -1691,9 +1683,6 @@
   .bg-blue-700\! {
     background-color: var(--color-blue-700) !important;
   }
-  .bg-blue-900 {
-    background-color: var(--color-blue-900);
-  }
   .bg-border {
     background-color: var(--border);
   }
@@ -1763,6 +1752,12 @@
       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);
   }

package/package.json

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