negodesign 0.0.27 → 0.0.28

package/dist/components/core/card/highlight/01/CardHighlight01.svelte

@@ -5,6 +5,9 @@
   import CardDescription from "../../shared/CardDescription.svelte";
   import CardFavorite from "../../shared/CardFavorite.svelte";
   import CardTags from "../../shared/CardTags.svelte";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
+
   /**
    * Card component with a title and content.
    * @component
@@ -32,15 +35,25 @@
   class="flex gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
 >
   <aside class="relative rounded-lg border h-50">
-    <div class="left-1 z-2 flex gap-1 w-50">
+    <div class="absolute top-3 left-1 z-2 flex gap-1 w-50">
       {#if isLoading}
         <Skeleton class="w-hull h-full rounded-lg" />
       {:else if logo}
-        <img src={logo} alt={title} class="rounded-lg" />
+        <img
+          src={logo}
+          alt={`Logo company ${title}`}
+          class="rounded-lg w-8 h-8 object-cover object-center"
+        />
+      {:else}
+        <img
+          src={ImgPlaceholderCompany}
+          alt={logo}
+          class="rounded-lg w-8 h-8 object-cover object-center"
+        />
       {/if}
     </div>
 
-    <div class="absolute top-3 right-1">
+    <div class="absolute top-3 right-1 z-2">
       <CardFavorite
         {id}
         {isFavorite}
@@ -50,12 +63,18 @@
     </div>
 
     {#if isLoading}
-      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
+      <Skeleton class="rounded-lg w-50 h-full object-cover object-center" />
     {:else if imageUrl}
       <img
         src={imageUrl}
         alt={imageUrl}
-        class="rounded-lg w-full h-full object-cover object-center"
+        class="rounded-lg w-50 h-full object-cover object-center"
+      />
+    {:else}
+      <img
+        src={ImgPlaceholder}
+        alt={imageUrl}
+        class="rounded-lg w-50 h-full object-cover object-center"
       />
     {/if}
     <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>

package/dist/components/core/card/highlight/02/CardHighlight02.svelte

@@ -5,6 +5,8 @@
   import CardDescription from "../../shared/CardDescription.svelte";
   import CardFavorite from "../../shared/CardFavorite.svelte";
   import CardTags from "../../shared/CardTags.svelte";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
   /**
    * Card component with a title and content.
    * @component
@@ -31,16 +33,28 @@
 <article
   class="flex flex-col gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
 >
-  <aside class="relative rounded-lg border h-50">
-    <div class="left-1 z-2 flex gap-1 w-50">
+  <aside class="relative rounded-lg border h-36">
+    <div class="absolute top-3 left-1 z-2 flex gap-1">
       {#if isLoading}
-        <Skeleton class="w-hull h-full rounded-lg" />
+        <Skeleton class="w-full h-full rounded-lg" />
       {:else if logo}
-        <img src={logo} alt={title} class="rounded-lg" />
+        <img
+          src={logo}
+          alt={logo}
+          class="rounded-lg w-8 h-8 object-cover object-center"
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+        />
+      {:else}
+        <img
+          src={ImgPlaceholderCompany}
+          alt={logo}
+          class="rounded-lg w-8 h-8 object-cover object-center"
+        />
       {/if}
     </div>
 
-    <div class="absolute top-3 right-1">
+    <div class="absolute top-3 right-1 z-2">
       <CardFavorite
         {id}
         {isFavorite}
@@ -56,11 +70,12 @@
         src={imageUrl}
         alt={imageUrl}
         class="rounded-lg w-full h-full object-cover object-center"
+        onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
       />
     {/if}
     <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
   </aside>
-  <div class="px-2">
+  <div class="px-2 w-55">
     <div class="rounded-md">
       {#if isLoading}
         <Skeleton class="h-4 w-30 rounded-lg" />
@@ -69,7 +84,7 @@
       {/if}
     </div>
 
-    <div class="w-75 my-2">
+    <div class="my-2">
       <CardDescription
         {content}
         {isLoading}

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

@@ -14,7 +14,8 @@ const items = [
     },
     {
         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',
+        //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',
+        imageUrl: undefined,
         title: 'Miramar Suites',
         content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
         tags: [
@@ -23,6 +24,7 @@ const items = [
             { icon: NecklaceIcon, text: 'Rua 19', },
         ]
     },
+    /*
     {
         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',
@@ -58,5 +60,6 @@ const items = [
             { icon: NecklaceIcon, text: 'Rua 19', },
         ]
     },
+    */
 ];
 export default items;

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

@@ -7,6 +7,9 @@
   import CardFavorite from "../shared/CardFavorite.svelte";
   import CardStartPrice from "../shared/CardStartPrice.svelte";
   import CardTags from "../shared/CardTags.svelte";
+  import ImgPlaceHolderGallery from "../../../../assets/placeholder-image.png";
+  import ImgPlaceholderCompany from "../../../../assets/placeholder-company.png";
+
   /**
    * Card component with a title and content.
    * @component
@@ -40,7 +43,23 @@
       {#if isLoading}
         <Skeleton class="h-5 w-20 rounded-full bg-black/20" />
       {:else if logo}
-        <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
+        <img
+          src={logo}
+          width={30}
+          height={30}
+          alt={title}
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+          class="rounded-lg"
+        />
+      {:else}
+        <img
+          src={ImgPlaceholderCompany}
+          width={30}
+          height={30}
+          alt={title}
+          class="rounded-lg"
+        />
       {/if}
     </div>
 
@@ -56,13 +75,15 @@
 
     {#if isLoading}
       <Skeleton
-        class="rounded-lg md:h-25 md:w-25 lg:h-45 lg:w-45 object-cover object-center bg-black/15"
+        class="rounded-lg h-30 w-full object-cover object-center bg-black/15"
       />
     {:else if imageUrl}
       <img
         src={imageUrl}
         alt={imageUrl}
-        class="rounded-tr-lg rounded-tl-lg h-25 lg:h-45 w-full object-cover object-center"
+        class="rounded-tr-lg rounded-tl-lg h-36 w-full object-cover object-center"
+        onerror={(e) =>
+          ((e.target as HTMLImageElement).src = ImgPlaceHolderGallery)}
       />
     {/if}
     <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
@@ -87,7 +108,7 @@
       <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
     </div>
 
-    <div class="w-full mb-3">
+    <div class="w-full mb-2">
       <CardTags {tags} />
     </div>
 

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

@@ -1,34 +1,32 @@
 <script lang="ts">
-    import StartBg from "../../../../assets/start.png";
+  import StartBg from "../../../../assets/start.png";
 
-    type Props = {
-        newPrice?: string | number;
-        oldPrice?: string | number;
-        type?: "start" | "normal";
-    };
+  type Props = {
+    newPrice?: string | number;
+    oldPrice?: string | number;
+    type?: "start" | "normal";
+  };
 
-    let { newPrice, oldPrice, type = "normal" }: Props = $props();
+  let { newPrice, oldPrice, type = "normal" }: Props = $props();
 </script>
 
 <div class="relative min-w-25 md:min-w-32">
-    {#if type == "start"}
-        <img
-            src={StartBg}
-            alt=""
-            class="shadow rounded-tl-lg rounded-bl-lg md:w-20 md:h-20 lg:w-32 lg:h-24 absolute"
-        />
-    {/if}
-    {#if newPrice && oldPrice}
-        <div class="z-20 flex justify-center items-center">
-            <div class="font-extrabold md:text-3xl lg:text-4xl">{newPrice}</div>
-            <div class="mx-2">/</div>
-            <div
-                class="font-semibold line-through text-red-600 text-[10px] md:text-xl"
-            >
-                {oldPrice}
-            </div>
-        </div>
-    {:else}
-        <div class="z-20 font-bold">{newPrice}</div>
-    {/if}
+  {#if type == "start"}
+    <img
+      src={StartBg}
+      alt=""
+      class="shadow rounded-tl-lg rounded-bl-lg md:w-20 md:h-20 lg:w-32 lg:h-24 absolute"
+    />
+  {/if}
+  {#if newPrice && oldPrice}
+    <div class="z-20 flex justify-center items-center">
+      <div class="font-extrabold text-lg">{newPrice}</div>
+      <div class="mx-2">/</div>
+      <div class="font-semibold line-through text-red-600 text-[10px]">
+        {oldPrice}
+      </div>
+    </div>
+  {:else}
+    <div class="z-20 font-bold">{newPrice}</div>
+  {/if}
 </div>

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

@@ -1,73 +1,70 @@
 <script lang="ts">
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { CardTagsProps } from "../types";
-    import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { CardTagsProps } from "../types";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
 
-    type Props = {
-        className?: string;
-        tags?: CardTagsProps[];
-        isTagBorderBottom?: boolean;
-        isWrap?: boolean;
-        isLoading?: boolean;
-    };
+  type Props = {
+    className?: string;
+    tags?: CardTagsProps[];
+    isTagBorderBottom?: boolean;
+    isWrap?: boolean;
+    isLoading?: boolean;
+  };
 
-    const {
-        tags,
-        className,
-        isTagBorderBottom,
-        isWrap = false,
-        isLoading = false,
-    }: Props = $props();
+  const {
+    tags,
+    className,
+    isTagBorderBottom,
+    isWrap = false,
+    isLoading = false,
+  }: Props = $props();
 
-    let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
+  let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
 </script>
 
 {#snippet createBadge(tag: CardTagsProps)}
-    <div
-        class="flex items-center h-5 shrink-0 {isTagBorderBottom
-            ? 'border border-gray-200 rounded-full px-2 py-1'
-            : ''}"
-    >
-        {#if tag.icon}
-            <HugeiconsIcon
-                icon={tag.icon}
-                class="mr-0.5 h-3.75 w-3.75 shrink-0"
-            />
-        {/if}
-        <div class="whitespace-nowrap">{tag.text}</div>
-    </div>
+  <div
+    class="flex items-center h-5 shrink-0 {isTagBorderBottom
+      ? 'border border-gray-200 rounded-full px-2 py-1'
+      : ''}"
+  >
+    {#if tag.icon}
+      <HugeiconsIcon icon={tag.icon} class="mr-0.5 h-3.75 w-3.75 shrink-0" />
+    {/if}
+    <div class="whitespace-nowrap">{tag.text}</div>
+  </div>
 {/snippet}
 
 {#snippet skeletonTag()}
-    <div class="my-2 flex gap-5">
-        {#each Array.from({ length: 3 }) as it, i (i)}
-            <Skeleton class="h-5 w-25 bg-black/50" />
-        {/each}
-    </div>
+  <div class="my-2 flex gap-5">
+    {#each Array.from({ length: 3 }) as it, i (i)}
+      <Skeleton class="h-5 w-25 bg-black/50" />
+    {/each}
+  </div>
 {/snippet}
 
 {#if isWrap}
-    <div class="flex flex-wrap gap-2 md:gap-5 {className}">
-        {#if isLoading}
-            {@render skeletonTag()}
-        {:else if tags && tags.length > 0}
-            {#each tags as tag, i (i)}
-                {@render createBadge(tag)}
-            {/each}
-        {/if}
-    </div>
+  <div class="flex flex-wrap gap-2 md:gap-5 {className}">
+    {#if isLoading}
+      {@render skeletonTag()}
+    {:else if tags && tags.length > 0}
+      {#each tags as tag, i (i)}
+        {@render createBadge(tag)}
+      {/each}
+    {/if}
+  </div>
 {:else}
-    <div
-        class="flex overflow-x-auto no-scrollbar w-full
-        {isJustify ? 'justify-between' : 'gap-4 md:gap-5 lg:gap-10'}
+  <div
+    class="flex overflow-x-auto no-scrollbar w-full
+        {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
         {className}"
-    >
-        {#if isLoading}
-            {@render skeletonTag()}
-        {:else if tags && tags.length > 0}
-            {#each tags as tag, i (i)}
-                {@render createBadge(tag)}
-            {/each}
-        {/if}
-    </div>
+  >
+    {#if isLoading}
+      {@render skeletonTag()}
+    {:else if tags && tags.length > 0}
+      {#each tags as tag, i (i)}
+        {@render createBadge(tag)}
+      {/each}
+    {/if}
+  </div>
 {/if}

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

@@ -21,6 +21,7 @@
     isDescriptionIcon,
     isDescriptionLabel,
     onButtonViewAll,
+    positionButtonPreviousAndNext,
   }: CarouselHighlightsProps = $props();
 
   const responsive = useDevice();
@@ -38,18 +39,19 @@
     isBorderBottom={false}
     {isButtonPreviousAndNext}
     {buttonPreviousAndNextClass}
+    {positionButtonPreviousAndNext}
     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-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/ui/CarouselPromotion.svelte

@@ -44,7 +44,7 @@
   >
     {#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 +55,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/globals.css

@@ -513,9 +513,6 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-3 {
-    margin-bottom: calc(var(--spacing) * 3);
-  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -711,8 +708,11 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
-  .h-25 {
-    height: calc(var(--spacing) * 25);
+  .h-30 {
+    height: calc(var(--spacing) * 30);
+  }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
   }
   .h-50 {
     height: calc(var(--spacing) * 50);
@@ -828,6 +828,9 @@
   .w-50 {
     width: calc(var(--spacing) * 50);
   }
+  .w-55 {
+    width: calc(var(--spacing) * 55);
+  }
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
@@ -3342,9 +3345,6 @@
     .md\:h-20 {
       height: calc(var(--spacing) * 20);
     }
-    .md\:h-25 {
-      height: calc(var(--spacing) * 25);
-    }
     .md\:h-100 {
       height: calc(var(--spacing) * 100);
     }
@@ -3372,9 +3372,6 @@
     .md\:w-20 {
       width: calc(var(--spacing) * 20);
     }
-    .md\:w-25 {
-      width: calc(var(--spacing) * 25);
-    }
     .md\:w-225 {
       width: calc(var(--spacing) * 225);
     }
@@ -3384,9 +3381,6 @@
     .md\:min-w-32 {
       min-width: calc(var(--spacing) * 32);
     }
-    .md\:basis-1\/2 {
-      flex-basis: calc(1 / 2 * 100%);
-    }
     .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -3430,10 +3424,6 @@
       font-size: var(--text-2xl);
       line-height: var(--tw-leading, var(--text-2xl--line-height));
     }
-    .md\:text-3xl {
-      font-size: var(--text-3xl);
-      line-height: var(--tw-leading, var(--text-3xl--line-height));
-    }
     .md\:text-4xl {
       font-size: var(--text-4xl);
       line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -3450,10 +3440,6 @@
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
-    .md\:text-xl {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
     .md\:text-\[14px\] {
       font-size: 14px;
     }
@@ -3515,33 +3501,18 @@
     .lg\:h-24 {
       height: calc(var(--spacing) * 24);
     }
-    .lg\:h-45 {
-      height: calc(var(--spacing) * 45);
-    }
     .lg\:h-105 {
       height: calc(var(--spacing) * 105);
     }
     .lg\:w-32 {
       width: calc(var(--spacing) * 32);
     }
-    .lg\:w-45 {
-      width: calc(var(--spacing) * 45);
-    }
     .lg\:w-105 {
       width: calc(var(--spacing) * 105);
     }
     .lg\:max-w-100 {
       max-width: calc(var(--spacing) * 100);
     }
-    .lg\:basis-1\/3 {
-      flex-basis: calc(1 / 3 * 100%);
-    }
-    .lg\:basis-1\/4 {
-      flex-basis: calc(1 / 4 * 100%);
-    }
-    .lg\:basis-auto {
-      flex-basis: auto;
-    }
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -3551,10 +3522,6 @@
     .lg\:gap-15 {
       gap: calc(var(--spacing) * 15);
     }
-    .lg\:text-4xl {
-      font-size: var(--text-4xl);
-      line-height: var(--tw-leading, var(--text-4xl--line-height));
-    }
     .lg\:text-\[80px\] {
       font-size: 80px;
     }

package/package.json

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