negodesign 0.0.55 → 0.0.57

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

@@ -1,109 +1,109 @@
-<script lang="ts">
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselBadgeProps } from "../../types.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-
-  const {
-    items = [],
-    imageClass,
-    iconClass,
-    labelClass,
-    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 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);
-
-  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>
-
-{#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}
-{/snippet}
-
-{#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'}
-            {isInlineBorder ? 'pb-3' : ''}
-            {itemClass} 
-          "
-            >
-              {@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.Root>
-{/if}
+<script lang="ts">
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselBadgeProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+
+  const {
+    items = [],
+    imageClass,
+    iconClass,
+    labelClass,
+    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 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);
+
+  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>
+
+{#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}
+{/snippet}
+
+{#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'}
+            {isInlineBorder ? 'pb-3' : ''}
+            {itemClass} 
+          "
+            >
+              {@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.Root>
+{/if}

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

@@ -1,4 +1,5 @@
 import type { CardMediaProps } from "../../../card/types";
+import type { GridProps } from "../../../grid/data/types";
 import type { CarouselSlotProps } from "../../../panel/type";
 import type { CarouselHeaderProps } from "../../types";
 /**
@@ -10,6 +11,8 @@ export interface CarouselGridMediaProps {
     headerProps?: CarouselHeaderProps;
     /** Props do slot/container do carousel (botões navegação, plugins) */
     slotProps?: CarouselSlotProps;
+    /** Props do grid simples */
+    gridProps?: GridProps;
     /** Classe CSS adicional para o container do grid */
     gridClass?: string;
     /** Exibe ícone antes da descrição */

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

@@ -11,6 +11,7 @@
   const {
     headerProps,
     slotProps,
+    gridProps,
     gridClass,
     items,
     variant,
@@ -35,7 +36,7 @@
       description={$t("empty.media.description")}
     />
   {:else}
-    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+    <CarouselGridSlot {slotProps} {gridClass} {gridProps}>
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}

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

@@ -1,4 +1,5 @@
 import type { CardProductProps } from "../../../card/types";
+import type { GridProps } from "../../../grid/data/types";
 import type { CarouselSlotProps } from "../../../panel/type";
 import type { CarouselHeaderProps } from "../../types";
 /**
@@ -9,6 +10,8 @@ export interface CarouselGridProductProps {
     headerProps?: CarouselHeaderProps;
     /** Props do slot/container do carousel (botões navegação, plugins) */
     slotProps?: CarouselSlotProps;
+    /** Props do grid simples */
+    gridProps?: GridProps;
     /** Classe CSS adicional para o container do grid */
     gridClass?: string;
     /** Variante visual do card: 1 ou 2 */
@@ -19,4 +22,9 @@ export interface CarouselGridProductProps {
     isLoading?: boolean;
     isDescriptionIcon?: boolean;
     isDescriptionLabel?: boolean;
+    onClickBuy?: (id: string | number) => void;
+    /** Callback ao clicar no botão carrinho */
+    onClickShop?: (id: string | number) => void;
+    /** Callback ao clicar no botão favorito */
+    onClickFavorite?: (id: string | number) => void;
 }

package/dist/components/core/carousel/grid/product/ui/CarouselGridProduct.svelte

@@ -1,22 +1,26 @@
 <script lang="ts">
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
   import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
   import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
-  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
   import * as Carousel from "../../../../../ui/carousel/index.js";
-  import { useDevice } from "../../../../../../hooks/responsive.svelte";
-  import { t } from "../../../../../../i18n";
   import CardProduct from "../../../../card/product/CardProduct.svelte";
   import type { CarouselGridProductProps } from "../types";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
 
   const {
     headerProps,
     slotProps,
+    gridProps,
     gridClass = "lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
     items,
     variant,
     isLoading = false,
     isDescriptionIcon = false,
     isDescriptionLabel = false,
+    onClickBuy,
+    onClickFavorite,
+    onClickShop,
   }: CarouselGridProductProps = $props();
 
   const responsive = useDevice();
@@ -30,7 +34,7 @@
       description={$t("empty.products.description")}
     />
   {:else}
-    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+    <CarouselGridSlot {slotProps} {gridClass} {gridProps}>
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}
@@ -52,6 +56,9 @@
                 {variant}
                 {isDescriptionIcon}
                 {isDescriptionLabel}
+                {onClickBuy}
+                {onClickFavorite}
+                {onClickShop}
               />
             </Carousel.Item>
           {:else}
@@ -61,6 +68,9 @@
                 {variant}
                 {isDescriptionIcon}
                 {isDescriptionLabel}
+                {onClickBuy}
+                {onClickFavorite}
+                {onClickShop}
               />
             </div>
           {/if}

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -34,7 +34,7 @@
       description={$t("empty.profiles.description")}
     />
   {:else}
-    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+    <CarouselGridSlot {slotProps} {gridClass}>
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}

package/dist/components/core/carousel/grid/promotion/ui/CarouselGridPromotion.svelte

@@ -29,7 +29,7 @@
       description={$t("empty.promotions.description")}
     />
   {:else}
-    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+    <CarouselGridSlot {slotProps} {gridClass}>
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -4,19 +4,24 @@
   import type { CarouselSlotProps } from "../../../../panel/type";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
   import Autoplay from "embla-carousel-autoplay";
+  import type { GridProps } from "../../../../grid/data/types";
+  import SimpleGrid from "../../../../grid/ui/SimpleGrid.svelte";
 
   type Props = {
     slotProps?: CarouselSlotProps;
-    totalItems: number;
+    gridProps?: GridProps;
     gridClass?: string;
     children: Snippet;
   };
 
-  const { slotProps, totalItems, gridClass, children }: Props = $props();
+  const { slotProps, gridProps, gridClass, children }: Props = $props();
 
   const responsive = useDevice();
 </script>
 
+{#if gridProps}
+  <SimpleGrid {...gridProps} />
+{/if}
 {#if responsive.isMobile}
   <CarouselSlot
     {...slotProps}
@@ -26,7 +31,7 @@
   </CarouselSlot>
 {:else}
   <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}"
+    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-2 {gridClass}"
   >
     {@render children()}
   </div>

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Snippet } from "svelte";
 import type { CarouselSlotProps } from "../../../../panel/type";
+import type { GridProps } from "../../../../grid/data/types";
 type Props = {
     slotProps?: CarouselSlotProps;
-    totalItems: number;
+    gridProps?: GridProps;
     gridClass?: string;
     children: Snippet;
 };

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

@@ -0,0 +1,30 @@
+import type { MenuVarientProps } from "../../nav/data/types";
+/**
+ * Item individual do CarouselHero — slide com imagem,
+ * título e descrição.
+ */
+export interface CarouselHeroItem {
+    /** Título do slide hero */
+    title: string;
+    /** URL da imagem de fundo do slide */
+    image: string;
+    /** Descrição do slide */
+    description: string;
+}
+/**
+ * Props do CarouselHero — carousel hero principal (ex: página de login)
+ * com slides em fullscreen e menu de navegação sobreposto.
+ */
+export interface CarouselHeroProps {
+    /** Lista de slides do hero */
+    items: CarouselHeroItem[];
+    /** Configuração do menu de navegação sobreposto */
+    navMenu: MenuVarientProps;
+    /** Classe CSS adicional para o container */
+    className?: string;
+    /** Classe CSS personalizada para o título */
+    titleClass?: string;
+    /** Classe CSS personalizada para a descrição */
+    descriptionClass?: string;
+    sectionClass?: string;
+}