negodesign 0.0.27 → 0.0.29

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
+  import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import type { CarouselProfileProps } from "../types";
+  import CardProfile from "../../../../card/profile/CardProfile.svelte";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    variant,
+    isLoading = false,
+  }: CarouselProfileProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader {...headerProps}>
+  <CarouselGridSlot
+    {slotProps}
+    totalItems={items.length}
+  >
+    {#if isLoading}
+      {#each Array.from({ length: responsive.isMobile ? 5 : 9 }) as _, i (`loading-${i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardProfile id={i} {variant} isLoading />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardProfile id={i} {variant} isLoading />
+          </div>
+        {/if}
+      {/each}
+    {:else}
+      {#each items as item, i (`profile-${item.id ?? i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardProfile {...item} {variant} />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardProfile {...item} {variant} />
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </CarouselGridSlot>
+</CarouselHeader>

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

@@ -0,0 +1,4 @@
+import type { CarouselProfileProps } from "../types";
+declare const CarouselGridProfile: import("svelte").Component<CarouselProfileProps, {}, "">;
+type CarouselGridProfile = ReturnType<typeof CarouselGridProfile>;
+export default CarouselGridProfile;

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
+  import type { CarouselSlotProps } from "../../../../panel/type";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import Autoplay from "embla-carousel-autoplay";
+
+  type Props = {
+    slotProps?: CarouselSlotProps;
+    totalItems: number;
+    children: Snippet;
+  };
+
+  const {
+    slotProps,
+    totalItems,
+    children,
+  }: Props = $props();
+
+  const responsive = useDevice();
+
+  const colsClass = $derived(
+    totalItems <= 4 ? "grid-cols-2" : "grid-cols-3"
+  );
+</script>
+
+{#if responsive.isMobile}
+  <CarouselSlot
+    {...slotProps}
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+  >
+    {@render children()}
+  </CarouselSlot>
+{:else}
+  <div class="grid {colsClass} gap-4 p-2">
+    {@render children()}
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { CarouselSlotProps } from "../../../../panel/type";
+type Props = {
+    slotProps?: CarouselSlotProps;
+    totalItems: number;
+    children: Snippet;
+};
+declare const CarouselGridSlot: import("svelte").Component<Props, {}, "">;
+type CarouselGridSlot = ReturnType<typeof CarouselGridSlot>;
+export default CarouselGridSlot;

package/dist/components/core/carousel/hero/CarouselHero.svelte

@@ -12,17 +12,18 @@
     descriptionClass,
     intervalMs = 5000,
     transitionMs = 1200,
+    indicatorShow = false,
   }: CarouselHeroProps & {
     children?: Snippet;
     intervalMs?: number;
     transitionMs?: number;
+    indicatorShow?: boolean;
   } = $props();
 
-  // Buffer duplo: duas camadas fixas, nunca desmontadas — só a opacidade muda.
   let layers = $state<[string, string]>([items?.[0]?.image ?? "", ""]);
   let active = $state<0 | 1>(0);
   let index = $state(0);
-  let switching = false; // evita trocas sobrepostas se o intervalo disparar antes do preload acabar
+  let switching = false;
 
   // eslint-disable-next-line svelte/prefer-svelte-reactivity
   const preloadCache = new Map<string, Promise<void>>();
@@ -35,7 +36,7 @@
     const promise = new Promise<void>((resolve) => {
       const img = new Image();
       img.onload = () => resolve();
-      img.onerror = () => resolve(); // não bloqueia o carousel por uma imagem partida
+      img.onerror = () => resolve();
       img.src = src;
     });
 
@@ -43,7 +44,6 @@
     return promise;
   }
 
-  // Pré-carrega todas as imagens uma vez, assim que os items ficam disponíveis.
   $effect(() => {
     items?.forEach((item) => void preload(item.image));
   });
@@ -53,7 +53,7 @@
     switching = true;
 
     const nextSrc = items[nextIndex].image;
-    await preload(nextSrc); // garante decode/cache antes de trocar a camada -> sem flash
+    await preload(nextSrc);
 
     const nextLayer = active === 0 ? 1 : 0;
     layers[nextLayer] = nextSrc;
@@ -139,20 +139,22 @@
       </section>
     </div>
 
-    {#if items && items.length > 1}
-      <div
-        style="position: absolute; bottom: 0.75rem; z-index: 10; display: flex; gap: 0.5rem;"
-      >
-        {#each items as item, i (`hero-dot-${i}`)}
-          <button
-            aria-label={`Ir para o slide ${i + 1}: ${item.title}`}
-            class="w-2 h-2 rounded-full transition-colors {i === index
-              ? 'bg-white'
-              : 'bg-white/40'}"
-            onclick={() => goTo(i)}
-          ></button>
-        {/each}
-      </div>
+    {#if indicatorShow}
+      {#if items && items.length > 1}
+        <div
+          style="position: absolute; bottom: 0.75rem; z-index: 10; display: flex; gap: 0.5rem;"
+        >
+          {#each items as item, i (`hero-dot-${i}`)}
+            <button
+              aria-label={`Ir para o slide ${i + 1}: ${item.title}`}
+              class="w-2 h-2 rounded-full transition-colors {i === index
+                ? 'bg-white'
+                : 'bg-white/40'}"
+              onclick={() => goTo(i)}
+            ></button>
+          {/each}
+        </div>
+      {/if}
     {/if}
   </header>
 {/if}

package/dist/components/core/carousel/hero/CarouselHero.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = CarouselHeroProps & {
     children?: Snippet;
     intervalMs?: number;
     transitionMs?: number;
+    indicatorShow?: boolean;
 };
 declare const CarouselHero: import("svelte").Component<$$ComponentProps, {}, "">;
 type CarouselHero = ReturnType<typeof CarouselHero>;

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

@@ -1,12 +1,12 @@
 import type { CardHighlightProps } from "../../card/types";
+import type { CarouselSlotProps } from "../../panel/type";
 import type { CarouselHeaderProps } from "../types";
-export interface CarouselHighlightsProps extends CarouselHeaderProps {
+export interface CarouselHighlightsProps {
+    headerProps?: CarouselHeaderProps;
+    slotProps?: CarouselSlotProps;
     items: CardHighlightProps[];
     varient?: 1 | 2;
-    isBorderBottom?: boolean;
     isLoading?: boolean;
     isDescriptionIcon?: boolean;
     isDescriptionLabel?: boolean;
-    isButtonPreviousAndNext?: boolean;
-    buttonPreviousAndNextClass?: string;
 }

package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte

@@ -8,48 +8,32 @@
   import Autoplay from "embla-carousel-autoplay";
 
   const {
-    title,
+    headerProps,
+    slotProps,
     items,
-    description,
-    titleClass,
-    descriptionClass,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-    containerClass = "",
     isLoading = false,
     varient = 1,
     isDescriptionIcon,
     isDescriptionLabel,
-    onButtonViewAll,
   }: CarouselHighlightsProps = $props();
 
   const responsive = useDevice();
 </script>
 
-<CarouselHeader
-  {title}
-  {description}
-  {titleClass}
-  {descriptionClass}
-  {containerClass}
-  {onButtonViewAll}
->
+<CarouselHeader {...headerProps}>
   <CarouselSlot
-    isBorderBottom={false}
-    {isButtonPreviousAndNext}
-    {buttonPreviousAndNextClass}
-    containerClass="w-full"
+    {...slotProps}
     plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
   >
     {#if isLoading}
       {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-auto">
+        <Carousel.Item class="pl-2 basis-auto">
           <CardHighlight id={i} {isLoading} {varient} />
         </Carousel.Item>
       {/each}
     {:else}
       {#each items as item, i (`highlight-${item.id ?? i}`)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/3">
+        <Carousel.Item class="pl-2 basis-auto">
           <CardHighlight
             {...item}
             {varient}

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

@@ -1,11 +1,11 @@
 import type { CardPromotionProps } from "../../card/types";
+import type { CarouselSlotProps } from "../../panel/type";
 import type { CarouselHeaderProps } from "../types";
-export interface CarouselPromotionProps extends CarouselHeaderProps {
+export interface CarouselPromotionProps {
+    headerProps?: CarouselHeaderProps;
+    slotProps?: CarouselSlotProps;
     items: CardPromotionProps[];
-    isBorderBottom?: boolean;
-    isLoading?: boolean;
-    isButtonPreviousAndNext?: boolean;
-    buttonPreviousAndNextClass?: string;
     isDescriptionIcon?: boolean;
     isDescriptionLabel?: boolean;
+    isLoading?: boolean;
 }

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte

@@ -8,43 +8,26 @@
   import Autoplay from "embla-carousel-autoplay";
 
   const {
-    title,
+    headerProps,
+    slotProps,
     items,
-    description,
-    titleClass,
-    descriptionClass,
-    isButtonPreviousAndNext = true,
     isLoading = false,
-    buttonPreviousAndNextClass = "",
-    containerClass = "",
-    positionButtonPreviousAndNext,
     isDescriptionIcon,
     isDescriptionLabel,
-    onButtonViewAll,
   }: CarouselPromotionProps = $props();
 
   const responsive = useDevice();
 </script>
 
-<CarouselHeader
-  {title}
-  {description}
-  {titleClass}
-  {descriptionClass}
-  {containerClass}
-  {onButtonViewAll}
->
+<CarouselHeader {...headerProps}>
   <CarouselSlot
-    isBorderBottom={false}
-    {isButtonPreviousAndNext}
-    {buttonPreviousAndNextClass}
-    {positionButtonPreviousAndNext}
+    {...slotProps}
     containerClass="w-full"
     plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
   >
     {#if isLoading}
       {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/4">
+        <Carousel.Item class="pl-2 w-75 basis-auto">
           <CardPromotion
             id={i}
             {isLoading}
@@ -55,7 +38,7 @@
       {/each}
     {:else}
       {#each items as item, i (`promotion-${item.id ?? i}`)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/3">
+        <Carousel.Item class="pl-2 w-75 basis-auto">
           <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
         </Carousel.Item>
       {/each}

package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte

@@ -18,11 +18,16 @@
     containerClass = "",
     onButtonViewAll,
     children,
+    isBorder,
   }: CarouselHeaderProps & Props = $props();
 </script>
 
 <div class="w-full flex justify-center">
-  <div class="w-[95%] p-2 rounded-xl border {containerClass}">
+  <div
+    class="w-[95%] p-2 rounded-xl
+    {isBorder ? 'border border-gray-50 dark:border-gray-800' : ''} 
+    {containerClass}"
+  >
     <div class="flex flex-col gap-1">
       <div class="flex justify-between">
         <div>

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

@@ -17,6 +17,7 @@ export interface CarouselHeaderProps {
     containerClass?: string;
     onButtonViewAll?: () => void;
     positionButtonPreviousAndNext?: "center" | "top_right";
+    isBorder?: boolean;
 }
 export interface CarouselBadgeProps {
     items: ItemCarousel[];

package/dist/components/core/panel/CarouselSlot.svelte

@@ -1,27 +1,16 @@
 <script lang="ts">
   import * as Carousel from "../../ui/carousel/index.js";
-  import type { Snippet } from "svelte";
-  import type { CarouselPlugins } from "../../ui/carousel/context.js";
-
-  type Props = {
-    positionButtonPreviousAndNext?: "center" | "top_right";
-    buttonPreviousAndNextClass?: string;
-    isButtonPreviousAndNext?: boolean;
-    isBorderBottom?: boolean;
-    containerClass?: string;
-    plugins?: CarouselPlugins;
-    children: Snippet;
-  };
+  import type { CarouselSlotProps } from "./type";
 
   const {
     positionButtonPreviousAndNext = "center",
     isButtonPreviousAndNext = true,
     buttonPreviousAndNextClass = "",
     isBorderBottom = true,
-    containerClass = "",
+    containerClass = "w-full",
     plugins = [],
     children,
-  }: Props = $props();
+  }: CarouselSlotProps = $props();
 
   const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
   const styleCenter =

package/dist/components/core/panel/CarouselSlot.svelte.d.ts

@@ -1,14 +1,4 @@
-import type { Snippet } from "svelte";
-import type { CarouselPlugins } from "../../ui/carousel/context.js";
-type Props = {
-    positionButtonPreviousAndNext?: "center" | "top_right";
-    buttonPreviousAndNextClass?: string;
-    isButtonPreviousAndNext?: boolean;
-    isBorderBottom?: boolean;
-    containerClass?: string;
-    plugins?: CarouselPlugins;
-    children: Snippet;
-};
-declare const CarouselSlot: import("svelte").Component<Props, {}, "">;
+import type { CarouselSlotProps } from "./type";
+declare const CarouselSlot: import("svelte").Component<CarouselSlotProps, {}, "">;
 type CarouselSlot = ReturnType<typeof CarouselSlot>;
 export default CarouselSlot;

package/dist/components/core/panel/type.d.ts

@@ -0,0 +1,11 @@
+import type { CarouselPlugins } from "../../ui/carousel/context";
+import type { Snippet } from "svelte";
+export type CarouselSlotProps = {
+    positionButtonPreviousAndNext?: "center" | "top_right";
+    buttonPreviousAndNextClass?: string;
+    isButtonPreviousAndNext?: boolean;
+    isBorderBottom?: boolean;
+    containerClass?: string;
+    plugins?: CarouselPlugins;
+    children?: Snippet;
+};

package/dist/components/core/panel/type.js

@@ -0,0 +1 @@
+export {};