negodesign 0.0.27 → 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

@@ -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>
@@ -78,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

@@ -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}
@@ -78,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/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>