negodesign 0.0.12 → 0.0.13

package/dist/components/core/card/promotion/CardPromotion.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import CardFavorite from "../shared/CardFavorite.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardPromotionProps } from "../types";
+
+  let {
+    logo,
+    imageUrl,
+    title,
+    isFavorite = false,
+  }: CardPromotionProps = $props();
+</script>
+
+<article class="relative rounded-sm">
+  {#if logo}
+    <div class="absolute top-1 left-1 z-2 flex gap-1 p-2">
+      <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
+    </div>
+  {/if}
+
+  <div class="absolute top-1 right-1 z-2 flex gap-1 p-2">
+    <CardFavorite {isFavorite} />
+  </div>
+
+  {#if imageUrl}
+    <img
+      src={imageUrl}
+      alt={imageUrl}
+      class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
+    />
+  {/if}
+  <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+
+  <div
+    class="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
+  >
+    {#if title}
+      <div class="text-center font-semibold text-[12px]">{title}</div>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/promotion/CardPromotion.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardPromotionProps } from "../types";
+declare const CardPromotion: import("svelte").Component<CardPromotionProps, {}, "">;
+type CardPromotion = ReturnType<typeof CardPromotion>;
+export default CardPromotion;

package/dist/components/core/card/promotion/data.d.ts

@@ -0,0 +1,3 @@
+import type { CardPromotionProps } from "../types";
+declare const items: CardPromotionProps[];
+export default items;

package/dist/components/core/card/promotion/data.js

@@ -0,0 +1,31 @@
+const items = [
+    {
+        id: 1,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Hotel Baía Azul',
+        isFavorite: true,
+    },
+    {
+        id: 2,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Miramar Suites',
+    },
+    {
+        id: 3,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Palm Resort & Spa',
+        isFavorite: true
+    },
+    {
+        id: 4,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Hotel Central Park',
+    },
+    {
+        id: 5,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Villa Serena Boutique',
+        isFavorite: true,
+    },
+];
+export default items;

package/dist/components/core/card/shared/CardFavorite.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-    import { Button } from "../../../ui/button/index.js";
-    import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Button } from "../../../ui/button/index.js";
+  import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
 
-    type Props = {
-        isFavorite: boolean;
-        onFavoriteClick: () => void;
-    };
+  type Props = {
+    isFavorite: boolean;
+    onFavoriteClick?: () => void;
+  };
 
-    let { isFavorite, onFavoriteClick }: Props = $props();
+  let { isFavorite, onFavoriteClick }: Props = $props();
 </script>
 
 {#if isFavorite}
-    <Button
-        class="w-8 h-8 rounded-full bg-[#ce2356]"
-        onclick={() => onFavoriteClick!()}
-    >
-        <HugeiconsIcon icon={HeartRemoveIcon} />
-    </Button>
+  <Button
+    class="w-8 h-8 rounded-full bg-[#ce2356]"
+    onclick={() => onFavoriteClick!()}
+  >
+    <HugeiconsIcon icon={HeartRemoveIcon} />
+  </Button>
 {:else}
-    <Button
-        class="w-8 h-8 rounded-full bg-[#808080]"
-        onclick={() => onFavoriteClick!()}
-    >
-        <HugeiconsIcon icon={HeartAddIcon} />
-    </Button>
+  <Button
+    class="w-8 h-8 rounded-full bg-[#808080]"
+    onclick={() => onFavoriteClick!()}
+  >
+    <HugeiconsIcon icon={HeartAddIcon} />
+  </Button>
 {/if}

package/dist/components/core/card/shared/CardFavorite.svelte.d.ts

@@ -1,6 +1,6 @@
 type Props = {
     isFavorite: boolean;
-    onFavoriteClick: () => void;
+    onFavoriteClick?: () => void;
 };
 declare const CardFavorite: import("svelte").Component<Props, {}, "">;
 type CardFavorite = ReturnType<typeof CardFavorite>;

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

@@ -42,3 +42,13 @@ export interface CardProfileProps {
     onButtonProfile?: (id: string | number) => void;
     onButtonDetails?: (id: string | number) => void;
 }
+export interface CardPromotionProps {
+    id: string | number;
+    logo?: string;
+    imageUrl?: string;
+    title?: string;
+    className?: string;
+    isFavorite?: boolean;
+    oldPrice?: string | number;
+    newPrice?: string | number;
+}

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
+  import type { CarouselPromotionProps } from "../../types.js";
+  import Button from "../../../../ui/button/button.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import { t } from "../../../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
+
+  const {
+    title,
+    items,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    onButtonViewAll,
+  }: CarouselPromotionProps = $props();
+</script>
+
+<div class="w-full flex justify-center">
+  <div class="w-[95%] p-2 rounded-xl {containerClass}">
+    <div class="ml-10 flex flex-col gap-1">
+      <div class="flex justify-between">
+        <div class="text-xl">{title ?? $t("label.promotion")}</div>
+        {#if onButtonViewAll}
+          <div>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="flex items-center gap-0.5"
+              onclick={onButtonViewAll}
+            >
+              {$t("label.view.full")}
+              <HugeiconsIcon icon={ArrowRight02Icon} />
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <CarouselSlot
+      isBorderBottom={false}
+      {isButtonPreviousAndNext}
+      {buttonPreviousAndNextClass}
+      containerClass="w-full"
+    >
+      {#each items as item (item.id)}
+        <div class="mx-2">
+          <CardPromotion {...item} />
+        </div>
+      {/each}
+    </CarouselSlot>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { SimpleBadgeCarouselProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+
+  const {
+    items,
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass,
+    valueActive,
+    orientation = "horizontal",
+    isBorderItem = true,
+    isBorderBottom = true,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+  }: SimpleBadgeCarouselProps = $props();
+
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-5 rounded-lg";
+</script>
+
+<CarouselSlot
+  {isBorderBottom}
+  {isButtonPreviousAndNext}
+  {buttonPreviousAndNextClass}
+>
+  {#each items as item (item.value)}
+    <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 : ""}`}
+    >
+      <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}
+          <HugeiconsIcon
+            icon={item.icon}
+            class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+          />
+        {/if}
+        <div class={`${labelClass}`}>{item.label}</div>
+      </div>
+    </Carousel.Item>
+  {/each}
+</CarouselSlot>

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

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

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

@@ -1,4 +1,5 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
+import type { CardPromotionProps } from "../card/types";
 export interface ItemCarousel {
     value: string;
     label: string;
@@ -8,7 +9,7 @@ export interface ItemCarousel {
     isActive?: boolean;
     onClick?: (value: string) => void;
 }
-export interface SimpleCarouselProps {
+export interface SimpleBadgeCarouselProps {
     items: ItemCarousel[];
     orientation?: "horizontal" | "vertical";
     imageClass?: string;
@@ -21,3 +22,13 @@ export interface SimpleCarouselProps {
     isButtonPreviousAndNext?: boolean;
     buttonPreviousAndNextClass?: string;
 }
+export interface CarouselPromotionProps {
+    title?: string;
+    description?: string;
+    items: CardPromotionProps[];
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    onButtonViewAll?: () => void;
+}

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import * as Carousel from "../../ui/carousel/index.js";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    children: Snippet;
+  };
+
+  const {
+    isBorderBottom = true,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
+>
+  <Carousel.Root>
+    <Carousel.Content class="ml-10">
+      {@render children()}
+    </Carousel.Content>
+    {#if isButtonPreviousAndNext}
+      <Carousel.Previous
+        class={`absolute top-1/2 -translate-y-1/2 left-1 mt-0.5 ${buttonPreviousAndNextClass}`}
+      />
+      <Carousel.Next
+        class={`absolute top-1/2 -translate-y-1/2 right-1 mt-0.5 ${buttonPreviousAndNextClass}`}
+      />
+    {/if}
+  </Carousel.Root>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type Props = {
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    children: Snippet;
+};
+declare const CarouselSlot: import("svelte").Component<Props, {}, "">;
+type CarouselSlot = ReturnType<typeof CarouselSlot>;
+export default CarouselSlot;

package/dist/globals.css

@@ -9,6 +9,7 @@
     --color-red-900: oklch(39.6% 0.141 25.723);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-slate-400: oklch(70.4% 0.04 256.788);
@@ -256,6 +257,9 @@
   .inset-0 {
     inset: 0px;
   }
+  .inset-x-0 {
+    inset-inline: 0px;
+  }
   .inset-y-0 {
     inset-block: 0px;
   }
@@ -283,6 +287,9 @@
   .top-0 {
     top: 0px;
   }
+  .top-1 {
+    top: var(--spacing);
+  }
   .top-1\.5 {
     top: calc(var(--spacing) * 1.5);
   }
@@ -331,6 +338,9 @@
   .bottom-0 {
     bottom: 0px;
   }
+  .bottom-1 {
+    bottom: var(--spacing);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -765,6 +775,9 @@
   .w-\[15px\] {
     width: 15px;
   }
+  .w-\[95\%\] {
+    width: 95%;
+  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -801,6 +814,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-11\/12 {
+    max-width: calc(11 / 12 * 100%);
+  }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -1281,6 +1297,12 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-black\/5 {
+    background-color: color-mix(in srgb, #000 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
   .bg-black\/10 {
     background-color: color-mix(in srgb, #000 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1305,6 +1327,9 @@
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
   }
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -1419,6 +1444,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .object-center {
+    object-position: center;
+  }
   .p-0 {
     padding: 0px;
   }
@@ -3152,6 +3180,9 @@
     .md\:flex {
       display: flex;
     }
+    .md\:h-37\.5 {
+      height: calc(var(--spacing) * 37.5);
+    }
     .md\:min-h-15 {
       min-height: calc(var(--spacing) * 15);
     }
@@ -3164,6 +3195,9 @@
     .md\:w-11\/12 {
       width: calc(11 / 12 * 100%);
     }
+    .md\:w-37\.5 {
+      width: calc(var(--spacing) * 37.5);
+    }
     .md\:max-w-md {
       max-width: var(--container-md);
     }
@@ -3252,9 +3286,15 @@
     .lg\:block {
       display: block;
     }
+    .lg\:h-50 {
+      height: calc(var(--spacing) * 50);
+    }
     .lg\:h-105 {
       height: calc(var(--spacing) * 105);
     }
+    .lg\:w-50 {
+      width: calc(var(--spacing) * 50);
+    }
     .lg\:w-105 {
       width: calc(var(--spacing) * 105);
     }
@@ -3318,6 +3358,9 @@
       background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
+  .dark\:bg-gray-800:is(.dark *) {
+    background-color: var(--color-gray-800);
+  }
   .dark\:bg-input\/30:is(.dark *) {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4050,7 +4093,7 @@
   .container-fixed {
     width: calc(11 / 12 * 100%);
     @media (width >= 64rem) {
-      width: calc(var(--spacing) * 300);
+      width: calc(11 / 12 * 100%);
     }
   }
 }

package/dist/i18n/langs/en.d.ts

@@ -55,6 +55,7 @@ declare const _default: {
     "label.close": string;
     "label.navigation": string;
     "label.navigation.text": string;
+    "label.promotion": string;
     "text.login": string;
     "text.register": string;
     "text.forget-password": string;

package/dist/i18n/langs/en.js

@@ -55,6 +55,7 @@ export default {
     "label.close": "Close",
     "label.navigation": "Navigation",
     "label.navigation.text": "Navigate through our application to access all features features and content",
+    "label.promotion": "Promotions",
     "text.login": "Enter your credentials below to securely access your account and continue where you left off.",
     "text.register": "Fill in the fields below with your information to create your new account and enjoy all our features.",
     "text.forget-password": "Enter your email address below and we will send you a link to reset your password.",

package/dist/i18n/langs/pt.d.ts

@@ -55,6 +55,7 @@ declare const _default: {
     "label.close": string;
     "label.navigation": string;
     "label.navigation.text": string;
+    "label.promotion": string;
     "text.login": string;
     "text.register": string;
     "text.forget-password": string;

package/dist/i18n/langs/pt.js

@@ -55,6 +55,7 @@ export default {
     "label.close": "Fechar",
     "label.navigation": "Navegação",
     "label.navigation.text": "Navega pela nossa aplicação",
+    "label.promotion": "Promoções",
     "text.login": "Insira as suas credenciais abaixo para aceder à sua conta com segurança e continuar de onde parou.",
     "text.register": "Preencha os campos abaixo com as suas informações para criar a sua nova conta e aproveitar todos os nossos recursos.",
     "text.forget-password": "Insira o seu endereço de email abaixo e enviaremos um link para redefinir a sua senha.",

package/dist/i18n/translations.d.ts

@@ -56,6 +56,7 @@ declare const _default: {
         "label.close": string;
         "label.navigation": string;
         "label.navigation.text": string;
+        "label.promotion": string;
         "text.login": string;
         "text.register": string;
         "text.forget-password": string;
@@ -145,6 +146,7 @@ declare const _default: {
         "label.close": string;
         "label.navigation": string;
         "label.navigation.text": string;
+        "label.promotion": string;
         "text.login": string;
         "text.register": string;
         "text.forget-password": string;

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import PrivacyPolicyOrTermsOfUse from "./components/pages/privacy-policy-or-term
 import PageOtpVerification from "./components/pages/security/otp-verification/PageOtpVerification.svelte";
 import PageForgetPassword from "./components/pages/security/forget-password/PageForgetPassword.svelte";
 import PageResetPassword from "./components/pages/security/reset-password/PageResetPassword.svelte";
+import SimpleBadgeCarousel from "./components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte";
 import PageLogin from "./components/pages/security/login/PageLogin.svelte";
 import SearchInput from "./components/core/search/SearchInput.svelte";
 import NavMenu from "./components/core/nav/ui/nav-menu.svelte";
@@ -29,7 +30,7 @@ export { getMergedTranslations } from "./i18n/config";
 export { getLocales } from "./i18n/config";
 export { 
 /** Componente raiz do Negodesign. Configura o tema, idioma e traduções. @property {Record<string, Record<string, string>>} translations - Traduções customizadas @property {Snippet} children - Conteúdo da aplicação */
-NegoDesign, NavMenu, SearchInput, 
+NegoDesign, NavMenu, SearchInput, SimpleBadgeCarousel, 
 /** Página de login com carousel hero e card de autenticação. @see PageLoginProps */
 PageLogin, 
 /** Página de recuperação de senha com carousel hero e card de recuperação. @see PageForgetPasswordProps */

package/dist/index.js

@@ -13,6 +13,7 @@ import PrivacyPolicyOrTermsOfUse from "./components/pages/privacy-policy-or-term
 import PageOtpVerification from "./components/pages/security/otp-verification/PageOtpVerification.svelte";
 import PageForgetPassword from "./components/pages/security/forget-password/PageForgetPassword.svelte";
 import PageResetPassword from "./components/pages/security/reset-password/PageResetPassword.svelte";
+import SimpleBadgeCarousel from "./components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte";
 import PageLogin from "./components/pages/security/login/PageLogin.svelte";
 import SearchInput from "./components/core/search/SearchInput.svelte";
 import NavMenu from "./components/core/nav/ui/nav-menu.svelte";
@@ -29,7 +30,7 @@ export { getMergedTranslations } from "./i18n/config";
 export { getLocales } from "./i18n/config";
 export { 
 /** Componente raiz do Negodesign. Configura o tema, idioma e traduções. @property {Record<string, Record<string, string>>} translations - Traduções customizadas @property {Snippet} children - Conteúdo da aplicação */
-NegoDesign, NavMenu, SearchInput, 
+NegoDesign, NavMenu, SearchInput, SimpleBadgeCarousel, 
 /** Página de login com carousel hero e card de autenticação. @see PageLoginProps */
 PageLogin, 
 /** Página de recuperação de senha com carousel hero e card de recuperação. @see PageForgetPasswordProps */

package/dist/styles/globals.css

@@ -16,7 +16,9 @@
     @apply max-md:bg-linear-to-r max-md:from-[#0077b6] max-md:via-[#219ebc] max-md:to-[#219ebc] dark:max-md:from-[#06344d] dark:max-md:via-[#023845] dark:max-md:to-[#074656];
   }
 
-  .container-fixed { @apply w-11/12 lg:w-300; }
+  .container-fixed {
+    @apply w-11/12 lg:w-11/12;
+  }
 }
 
 :root {
@@ -134,10 +136,12 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
+
   html {
     @apply font-sans;
   }
-}
+}

package/package.json

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

package/dist/components/core/carousel/ui/SimpleCarousel.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import * as Carousel from "../../../ui/carousel/index.js";
-  import type { SimpleCarouselProps } from "../types.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  const {
-    items,
-    imageClass,
-    iconClass,
-    labelClass,
-    activeClass,
-    valueActive,
-    orientation = "horizontal",
-    isBorderItem = true,
-    isBorderBottom = true,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-  }: SimpleCarouselProps = $props();
-
-  const DEFAULT_IMG_OR_ICON_CLASS = "size-5 rounded-lg";
-</script>
-
-<nav class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""}`}>
-  <Carousel.Root>
-    <Carousel.Content class="ml-10">
-      {#each items as item (item.value)}
-        <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 : ""}`}
-        >
-          <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}
-              <HugeiconsIcon
-                icon={item.icon}
-                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
-              />
-            {/if}
-            <div class={`${labelClass}`}>{item.label}</div>
-          </div>
-        </Carousel.Item>
-      {/each}
-    </Carousel.Content>
-    {#if isButtonPreviousAndNext}
-      <Carousel.Previous
-        class={`absolute top-1/2 -translate-y-1/2 left-1 mt-0.5 ${buttonPreviousAndNextClass}`}
-      />
-      <Carousel.Next class={`absolute top-1/2 -translate-y-1/2 right-1 mt-0.5 ${buttonPreviousAndNextClass}`} />
-    {/if}
-  </Carousel.Root>
-</nav>

package/dist/components/core/carousel/ui/SimpleCarousel.svelte.d.ts

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