negodesign 0.0.28 → 0.0.29

package/dist/components/core/banner/BannerNotification.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { BannerNotificationProps } from "./types";
+
+  let {
+    strongText,
+    description,
+    ctaText,
+    ctaHref,
+    onCtaClick,
+    onDismiss,
+    bgClass = "bg-gray-800/50",
+    textClass = "text-gray-100",
+    ctaClass,
+    class: className = "",
+  }: BannerNotificationProps = $props();
+</script>
+
+<div
+  class="relative isolate flex items-center gap-x-6 overflow-hidden {bgClass} px-6 py-2.5 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10 sm:px-3.5 sm:before:flex-1 {className}"
+>
+  <!-- Blur decorations -->
+  <div
+    aria-hidden="true"
+    class="absolute top-1/2 left-[max(-7rem,calc(50%-52rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+  >
+    <div
+      style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
+      class="aspect-577/310 w-144.25 bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-40"
+    ></div>
+  </div>
+  <div
+    aria-hidden="true"
+    class="absolute top-1/2 left-[max(45rem,calc(50%+8rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+  >
+    <div
+      style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
+      class="aspect-577/310 w-144.25 bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-40"
+    ></div>
+  </div>
+
+  <!-- Content -->
+  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+    <p class="text-sm/6 {textClass}">
+      {#if strongText}
+        <strong class="font-semibold">{strongText}</strong><svg
+          viewBox="0 0 2 2"
+          aria-hidden="true"
+          class="mx-2 inline size-0.5 fill-current"><circle r="1" cx="1" cy="1" /></svg
+        >
+      {/if}
+      {description}
+    </p>
+    {#if ctaText}
+      {#if ctaHref}
+        <a
+          href={ctaHref}
+          class="flex-none rounded-full bg-white/10 px-3.5 py-1 text-sm font-semibold text-white shadow-xs inset-ring-white/20 hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white {ctaClass}"
+        >
+          {ctaText} <span aria-hidden="true">&rarr;</span>
+        </a>
+      {:else}
+        <button
+          type="button"
+          onclick={onCtaClick}
+          class="flex-none rounded-full bg-white/10 px-3.5 py-1 text-sm font-semibold text-white shadow-xs inset-ring-white/20 hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white {ctaClass}"
+        >
+          {ctaText} <span aria-hidden="true">&rarr;</span>
+        </button>
+      {/if}
+    {/if}
+  </div>
+
+  <!-- Dismiss -->
+  <div class="flex flex-1 justify-end">
+    <button
+      type="button"
+      onclick={onDismiss}
+      class="-m-3 p-3 focus-visible:-outline-offset-4"
+    >
+      <span class="sr-only">Dismiss</span>
+      <svg
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        data-slot="icon"
+        aria-hidden="true"
+        class="size-5 text-gray-100"
+      >
+        <path
+          d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>

package/dist/components/core/banner/BannerNotification.svelte.d.ts

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

package/dist/components/core/banner/CardAdBanner.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import Button from "../../ui/button/button.svelte";
+  import type { BannerProps } from "./types";
+  import { AdvertisimentIcon } from "@hugeicons/core-free-icons";
+
+  let {
+    tagText,
+    titleHighlight,
+    titleMain,
+    buttonText = "Saiba mais",
+    onClickButton,
+    href,
+    class: className = "",
+    titleHighlightClass,
+    titleMainClass,
+    tagTextClass,
+    buttonClass,
+    titleBgClass,
+    tagBgClass,
+  }: BannerProps = $props();
+</script>
+
+{#snippet content()}
+  <article
+    class="relative flex w-full items-stretch overflow-hidden rounded-lg border border-transparent {className}"
+  >
+    <!-- Left accent strip -->
+    <aside
+      class="flex w-28 shrink-0 flex-col justify-center gap-1 {tagBgClass ||
+        'bg-blue-400'} px-3 py-2 sm:w-32"
+    >
+      <HugeiconsIcon
+        icon={AdvertisimentIcon}
+        size={30}
+        color="#ffffff"
+        strokeWidth={1}
+      />
+      <p
+        class={`text-sm leading-tight font-bold ${tagTextClass || "text-[#dce9e7]"}`}
+      >
+        {tagText}
+      </p>
+    </aside>
+
+    <!-- Main content -->
+    <div
+      class="flex flex-1 flex-wrap items-center justify-between gap-3 {titleBgClass ||
+        'bg-[#dabc16]'} px-4 py-3 sm:px-6"
+    >
+      <h3 class="text-lg font-extrabold tracking-tight sm:text-2xl">
+        <span class="{titleHighlightClass || 'text-white'} pr-2"
+          >{titleHighlight}</span
+        >
+        <span class={titleMainClass || "text-gray-200"}>{titleMain}</span>
+      </h3>
+
+      <Button
+        onclick={() => onClickButton?.()}
+        class="shrink-0 rounded-md bg-white px-4 py-2 text-sm font-medium text-indigo-600 hover:bg-white/90 {buttonClass}"
+      >
+        {buttonText}
+      </Button>
+    </div>
+  </article>
+{/snippet}
+
+{#if href}
+  <a {href} class="block">
+    {@render content()}
+  </a>
+{:else}
+  {@render content()}
+{/if}

package/dist/components/core/banner/CardAdBanner.svelte.d.ts

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

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

@@ -0,0 +1,42 @@
+export type BannerProps = {
+    /** Text shown stacked inside the amber side strip, e.g. "Este anúncio pode ser seu." */
+    tagText: string;
+    /** First part of the headline (rendered in the amber accent color) */
+    titleHighlight: string;
+    /** Second part of the headline (rendered in the green accent color) */
+    titleMain: string;
+    /** CTA button label */
+    buttonText?: string;
+    /** Called when the CTA button is clicked */
+    onClickButton?: () => void;
+    /** Optional href — if provided, the whole card navigates on click */
+    href?: string;
+    class?: string;
+    titleHighlightClass?: string;
+    titleMainClass?: string;
+    titleBgClass?: string;
+    tagTextClass?: string;
+    buttonClass?: string;
+    tagBgClass?: string;
+};
+export type BannerNotificationProps = {
+    /** Strong text before the separator, e.g. "GeneriCon 2023" */
+    strongText?: string;
+    /** Main description text */
+    description: string;
+    /** CTA button label */
+    ctaText?: string;
+    /** CTA button href */
+    ctaHref?: string;
+    /** Called when the CTA button is clicked */
+    onCtaClick?: () => void;
+    /** Called when the dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Background class, default: bg-gray-800/50 */
+    bgClass?: string;
+    /** Text class for the description */
+    textClass?: string;
+    /** CTA button class */
+    ctaClass?: string;
+    class?: string;
+};

package/dist/components/core/banner/types.js

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

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

@@ -97,7 +97,11 @@
       />
     </div>
 
-    <CardTags {tags} {isLoading} />
+    {#if tags && tags.length > 0}
+      <div class="w-full mb-2">
+        <CardTags {tags} />
+      </div>
+    {/if}
 
     {#if isLoading}
       <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />

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

@@ -93,9 +93,11 @@
       />
     </div>
 
-    <div class="my-2">
-      <CardTags {tags} {isLoading} />
-    </div>
+    {#if tags && tags.length > 0}
+      <div class="my-2">
+        <CardTags {tags} {isLoading} />
+      </div>
+    {/if}
 
     {#if isLoading}
       <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />

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

@@ -14,8 +14,7 @@ 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: undefined,
+        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',
         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: [
@@ -24,7 +23,6 @@ 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',
@@ -60,6 +58,5 @@ const items = [
             { icon: NecklaceIcon, text: 'Rua 19', },
         ]
     },
-    */
 ];
 export default items;

package/dist/components/core/card/media/01/CardMedia01.svelte

@@ -1,111 +1,137 @@
 <script lang="ts">
-    /**
-     * Card component with a title and content.
-     * @component
-     */
-    import {
-        InformationCircleIcon,
-        UserIcon,
-    } from "@hugeicons/core-free-icons";
-    import { t } from "../../../../../i18n";
-    import type { CardMediaProps } from "../../types";
-    import CardStarRating from "../../shared/CardStarRating.svelte";
-    import CardDescription from "../../shared/CardDescription.svelte";
-    import CardTags from "../../shared/CardTags.svelte";
-    import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
-    import CardButton from "../../shared/CardButton.svelte";
-    import CardFavorite from "../../shared/CardFavorite.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import { InformationCircleIcon, UserIcon } from "@hugeicons/core-free-icons";
+  import { t } from "../../../../../i18n";
+  import type { CardMediaProps } from "../../types";
+  import CardStarRating from "../../shared/CardStarRating.svelte";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
 
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        imageUrl,
-        videoUrl,
-        //videoAction,
-        startNumber,
-        startMax = 5,
-        isImageButtonMaximized = false,
-        isVideoButtonMaximized = false,
-        isTagBorderBottom = false,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardMediaProps = $props();
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    content,
+    imageUrl,
+    videoUrl,
+    //videoAction,
+    startNumber,
+    startMax = 5,
+    isImageButtonMaximized = false,
+    isVideoButtonMaximized = false,
+    isTagBorderBottom = false,
+    isFavorite = false,
+    isLoading = false,
+    buttonProfileClass,
+    buttonDetailsClass,
+    onFavoriteClick,
+    onButtonProfile,
+    onButtonDetails,
+  }: CardMediaProps = $props();
 
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
+  let isShowButtonProfileAndDetails = $derived(
+    onButtonProfile != null && onButtonDetails != null,
+  );
 </script>
 
 <article
-    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
+  class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
 >
-    <div class="flex justify-between items-center w-full mb-4">
-        <div class="flex justify-start gap-2">
-            <div class="flex justify-center items-center">
-                {#if logo}
-                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-                {/if}
-            </div>
-            <div class="flex-col">
-                {#if title}
-                    <div class="text-center font-bold text-lg">{title}</div>
-                {/if}
-                {#if startNumber}
-                    <CardStarRating {startNumber} {startMax} />
-                {/if}
-            </div>
-        </div>
-        <div class="flex justify-end items-center">
-            <CardFavorite
-                {id}
-                {isFavorite}
-                onFavoriteClick={() => onFavoriteClick!(id)}
-            />
-        </div>
-    </div>
+  <div class="flex justify-between items-center w-full mb-4">
+    <div class="flex justify-start gap-2">
+      <div class="flex justify-center items-center">
+        {#if isLoading}
+          <Skeleton class="w-12 h-12 rounded-lg bg-gray-300" />
+        {:else if logo}
+          <img
+            src={logo}
+            alt={logo}
+            class="w-12 h-12 rounded-lg"
+            onerror={(e) =>
+              ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+          />
+        {/if}
+      </div>
+      <div class="flex-col">
+        {#if title}
+          <div class="text-center font-bold text-lg">{title}</div>
+        {:else if isLoading}
+          <Skeleton class="w-40 h-5 rounded-lg bg-gray-400 mb-0.5" />
+        {/if}
 
-    <div class="h-15 my-2">
-        <CardDescription {content} />
+        {#if startNumber}
+          <CardStarRating {startNumber} {startMax} {isLoading} />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-end items-center">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onFavoriteClick!(id)}
+      />
     </div>
+  </div>
 
-    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
+  <div class="h-15 my-2">
+    <CardDescription {content} {isLoading} />
+  </div>
 
-    <CardThumbnailVideo
-        {imageUrl}
-        {videoUrl}
-        {isImageButtonMaximized}
-        {isVideoButtonMaximized}
-    />
+  <CardTags
+    className="my-6"
+    tags={tags ?? []}
+    {isTagBorderBottom}
+    {isLoading}
+  />
 
-    {#if onButtonProfile || onButtonDetails}
-        <div class="flex justify-center items-center gap-2 mt-4 w-full">
-            {#if onButtonProfile}
-                <CardButton
-                    {id}
-                    icon={UserIcon}
-                    className={buttonProfileClass}
-                    text={$t("label.view.profile")}
-                    onClick={onButtonProfile}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-            {#if onButtonDetails}
-                <CardButton
-                    {id}
-                    icon={InformationCircleIcon}
-                    className={buttonDetailsClass}
-                    text={$t("label.more.details")}
-                    onClick={onButtonDetails}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-        </div>
-    {/if}
+  <CardThumbnailVideo
+    {imageUrl}
+    {videoUrl}
+    {isImageButtonMaximized}
+    {isVideoButtonMaximized}
+    {isLoading}
+  />
+
+  {#if onButtonProfile || onButtonDetails}
+    <div class="flex justify-center items-center gap-2 mt-4 w-full">
+      {#if onButtonProfile}
+        <CardButton
+          {id}
+          icon={UserIcon}
+          className={buttonProfileClass}
+          text={$t("label.view.profile")}
+          onClick={onButtonProfile}
+          isFlex={isShowButtonProfileAndDetails}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+      {#if onButtonDetails}
+        <CardButton
+          {id}
+          icon={InformationCircleIcon}
+          className={buttonDetailsClass}
+          text={$t("label.more.details")}
+          onClick={onButtonDetails}
+          isFlex={isShowButtonProfileAndDetails}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+    </div>
+  {/if}
 </article>