negodesign 0.0.29 → 0.0.31

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

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

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { CtaCardBannerProps } from "./types";
+
+  let {
+    title,
+    description,
+    primaryText,
+    secondaryText,
+    onClickPrimary,
+    onClickSecondary,
+    primaryHref,
+    secondaryHref,
+    class: className = "",
+    rings: customRings = [],
+  }: CtaCardBannerProps = $props();
+
+  // Painter's-algorithm rings: largest/darkest first, smallest/lightest last.
+  const rings = $derived(
+    customRings && customRings.length > 0
+      ? customRings
+      : [
+          { size: 920, color: "#2563EB" },
+          { size: 760, color: "#3B76ED" },
+          { size: 610, color: "#548BF0" },
+          { size: 470, color: "#7FA6F3" },
+          { size: 340, color: "#A9C2F6" },
+          { size: 220, color: "#CFDEFA" },
+          { size: 110, color: "#EEF3FD" },
+        ],
+  );
+</script>
+
+{#snippet pill(
+  label: string,
+  onClick: (() => void) | undefined,
+  href: string | undefined,
+)}
+  {#snippet inner()}
+    <span class="whitespace-nowrap">{label}</span>
+    <span
+      class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white"
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="#111"
+        stroke-width="2.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M7 17 L17 7" />
+        <path d="M8 7 L17 7 L17 16" />
+      </svg>
+    </span>
+  {/snippet}
+
+  {#if href}
+    <a
+      {href}
+      class="inline-flex items-center gap-3 rounded-full bg-neutral-900 py-3 pr-2 pl-5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+    >
+      {@render inner()}
+    </a>
+  {:else}
+    <button
+      type="button"
+      onclick={() => onClick?.()}
+      class="inline-flex items-center gap-3 rounded-full bg-neutral-900 py-3 pr-2 pl-5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+    >
+      {@render inner()}
+    </button>
+  {/if}
+{/snippet}
+
+<article
+  class="relative isolate overflow-hidden rounded-lg bg-gradient p-1 shadow-sm {className}"
+>
+  <div
+    class="relative overflow-hidden rounded-[1.35rem] px-6 py-10 sm:px-10 sm:py-12"
+  >
+    <!-- Concentric ring decoration -->
+    <div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
+      {#each rings as ring (ring.size)}
+        <div
+          class="absolute top-1/2 right-0 rounded-full"
+          style="
+            width: {ring.size}px;
+            height: {ring.size}px;
+            background: {ring.color};
+            transform: translate(45%, -50%);
+          "
+        ></div>
+      {/each}
+    </div>
+
+    <div class="relative z-10 max-w-md">
+      <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+        {title}
+      </h2>
+
+      {#if description}
+        <p class="mt-3 text-sm leading-relaxed text-white/85 sm:text-base">
+          {description}
+        </p>
+      {/if}
+
+      <div class="mt-7 flex flex-wrap items-center gap-3">
+        {@render pill(primaryText, onClickPrimary, primaryHref)}
+        {#if secondaryText}
+          {@render pill(secondaryText, onClickSecondary, secondaryHref)}
+        {/if}
+      </div>
+    </div>
+  </div>
+</article>

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

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

package/dist/components/core/banner/{BannerNotification.svelte → NotificationBanner.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { BannerNotificationProps } from "./types";
+  import type { NotificationBannerProps } from "./types";
 
   let {
     strongText,
@@ -12,7 +12,7 @@
     textClass = "text-gray-100",
     ctaClass,
     class: className = "",
-  }: BannerNotificationProps = $props();
+  }: NotificationBannerProps = $props();
 </script>
 
 <div
@@ -45,7 +45,8 @@
         <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
+          class="mx-2 inline size-0.5 fill-current"
+          ><circle r="1" cx="1" cy="1" /></svg
         >
       {/if}
       {description}

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

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

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

@@ -1,25 +1,35 @@
+/** Props do componente AdCardBanner — banner de anúncio com faixa lateral colorida e CTA. */
 export type BannerProps = {
-    /** Text shown stacked inside the amber side strip, e.g. "Este anúncio pode ser seu." */
+    /** Texto mostrado na faixa lateral colorida, ex: "Este anúncio pode ser seu." */
     tagText: string;
-    /** First part of the headline (rendered in the amber accent color) */
+    /** Primeira parte do título (renderizada na cor de destaque âmbar) */
     titleHighlight: string;
-    /** Second part of the headline (rendered in the green accent color) */
+    /** Segunda parte do título (renderizada na cor verde de destaque) */
     titleMain: string;
-    /** CTA button label */
+    /** Texto do botão CTA */
     buttonText?: string;
-    /** Called when the CTA button is clicked */
+    /** Chamado quando o botão CTA é clicado */
     onClickButton?: () => void;
-    /** Optional href — if provided, the whole card navigates on click */
+    /** href opcional — se fornecido, todo o card navega ao clicar */
     href?: string;
+    /** Classe CSS adicional para o container */
     class?: string;
+    /** Classe CSS para a parte highlight do título */
     titleHighlightClass?: string;
+    /** Classe CSS para a parte principal do título */
     titleMainClass?: string;
+    /** Classe CSS para o fundo do título */
     titleBgClass?: string;
+    /** Classe CSS para o texto da tag lateral */
     tagTextClass?: string;
+    /** Classe CSS para o botão */
     buttonClass?: string;
+    /** Classe CSS para o fundo da tag lateral */
     tagBgClass?: string;
 };
-export type BannerNotificationProps = {
+/** Alias para BannerProps — props do componente AdCardBanner. */
+export type AdCardBannerProps = BannerProps;
+export type NotificationBannerProps = {
     /** Strong text before the separator, e.g. "GeneriCon 2023" */
     strongText?: string;
     /** Main description text */
@@ -40,3 +50,24 @@ export type BannerNotificationProps = {
     ctaClass?: string;
     class?: string;
 };
+/**
+ * "Let's get in touch" style CTA banner: bold title, supporting copy,
+ * and up to two pill-shaped action buttons, with a concentric-ring
+ * decoration bleeding off the right edge.
+ * @component
+ */
+export type CtaCardBannerProps = {
+    title: string;
+    description?: string;
+    primaryText: string;
+    secondaryText?: string;
+    onClickPrimary?: () => void;
+    onClickSecondary?: () => void;
+    primaryHref?: string;
+    secondaryHref?: string;
+    class?: string;
+    rings?: Array<{
+        size: number;
+        color: string;
+    }>;
+};

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-  import Button from "../../../../ui/button/button.svelte";
   import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { t } from "../../../../../i18n";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
   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
    */
   import type { CardHighlightProps } from "../../types";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardLogo from "../../shared/CardLogo.svelte";
+  import { t } from "../../../../../i18n";
 
   let {
     id,
@@ -24,8 +24,10 @@
     isLoading = false,
     isFavorite = false,
     buttonText,
+    buttonClass,
     isDescriptionIcon,
     isDescriptionLabel,
+    isExpandButton = false,
     onClickBtn,
     onClickFavorite,
   }: CardHighlightProps = $props();
@@ -36,21 +38,7 @@
 >
   <aside class="relative rounded-lg border h-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={`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}
+      <CardLogo {isLoading} {logo} />
     </div>
 
     <div class="absolute top-3 right-1 z-2">
@@ -103,12 +91,13 @@
       </div>
     {/if}
 
-    {#if isLoading}
-      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
-    {:else}
-      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
-        {buttonText || $t("label.buy")}
-      </Button>
-    {/if}
+    <CardButton
+      {id}
+      {isLoading}
+      className={buttonClass}
+      isFlex={isExpandButton}
+      onClick={() => onClickBtn!(id)}
+      text={buttonText || $t("label.buy")}
+    />
   </div>
 </article>

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

@@ -12,6 +12,8 @@
    * @component
    */
   import type { CardHighlightProps } from "../../types";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardLogo from "../../shared/CardLogo.svelte";
 
   let {
     id,
@@ -24,7 +26,9 @@
     isFavorite = false,
     isDescriptionIcon,
     isDescriptionLabel,
+    isExpandButton = false,
     buttonText,
+    buttonClass,
     onClickBtn,
     onClickFavorite,
   }: CardHighlightProps = $props();
@@ -35,23 +39,7 @@
 >
   <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-full h-full rounded-lg" />
-      {:else if logo}
-        <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}
+      <CardLogo {isLoading} {logo} />
     </div>
 
     <div class="absolute top-3 right-1 z-2">
@@ -99,12 +87,13 @@
       </div>
     {/if}
 
-    {#if isLoading}
-      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
-    {:else}
-      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
-        {buttonText || $t("label.buy")}
-      </Button>
-    {/if}
+    <CardButton
+      {id}
+      {isLoading}
+      className={buttonClass}
+      isFlex={isExpandButton}
+      onClick={() => onClickBtn!(id)}
+      text={buttonText || $t("label.buy")}
+    />
   </div>
 </article>

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

@@ -13,7 +13,7 @@
   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";
+  import CardLogo from "../../shared/CardLogo.svelte";
 
   let {
     id,
@@ -49,17 +49,7 @@
   <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}
+        <CardLogo {logo} {isLoading} />
       </div>
       <div class="flex-col">
         {#if title}

package/dist/components/core/card/media/02/CardMedia02.svelte

@@ -13,7 +13,7 @@
   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";
+  import CardLogo from "../../shared/CardLogo.svelte";
   let {
     id,
     tags,
@@ -49,17 +49,7 @@
   <div class="flex flex-col justify-center items-center w-full relative">
     <div class="flex flex-col 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}
+        <CardLogo {logo} {isLoading} />
       </div>
       <div class="flex flex-col justify-center items-center">
         {#if title}

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

@@ -29,6 +29,7 @@
     oldPrice,
     content,
     buttonBuyText,
+    buttonBuyClass,
     isDescriptionIcon,
     isDescriptionLabel,
     onClickBuy,
@@ -127,7 +128,10 @@
     {#if isLoading}
       <Skeleton class="h-9 w-full rounded-md" />
     {:else}
-      <Button onclick={() => onClickBuy!(id)} class="w-full bottom-0">
+      <Button
+        onclick={() => onClickBuy!(id)}
+        class="w-full bottom-0 bg-gradient {buttonBuyClass}"
+      >
         {buttonBuyText || $t("label.buy")}
       </Button>
     {/if}

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

@@ -5,7 +5,7 @@
 
   type CardButtonProps = {
     id: string | number;
-    icon: IconSvgElement;
+    icon?: IconSvgElement | string;
     isFlex?: boolean;
     className?: string;
     text: string;
@@ -30,10 +30,16 @@
   />
 {:else}
   <Button
-    class="{isFlex ? 'flex-1' : ''} {className}"
+    class="bg-gradient {isFlex ? 'flex-1' : ''} {className}"
     onclick={() => onClick(id)}
   >
-    <HugeiconsIcon {icon} />
+    {#if icon}
+      {#if typeof icon === "string"}
+        <i class={icon}></i>
+      {:else}
+        <HugeiconsIcon {icon} />
+      {/if}
+    {/if}
     <span>{text}</span>
   </Button>
 {/if}

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

@@ -1,7 +1,7 @@
 import { type IconSvgElement } from "@hugeicons/svelte";
 type CardButtonProps = {
     id: string | number;
-    icon: IconSvgElement;
+    icon?: IconSvgElement | string;
     isFlex?: boolean;
     className?: string;
     text: string;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import ImgPlaceholderCompany from "../../../../assets/placeholder-company.png";
+
+  let { logo, isLoading = false }: { logo?: string; isLoading?: boolean } =
+    $props();
+</script>
+
+{#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}

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    logo?: string;
+    isLoading?: boolean;
+};
+declare const CardLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardLogo = ReturnType<typeof CardLogo>;
+export default CardLogo;

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

@@ -13,6 +13,7 @@
   } from "@hugeicons/core-free-icons";
   import Skeleton from "../../../ui/skeleton/skeleton.svelte";
   import ImgPlaceholder from "../../../../assets/placeholder-image.png";
+  import VideoPlaceholder from "../../../../assets/lonely-404.mp4";
 
   type Props = {
     imageUrl?: string;
@@ -146,6 +147,8 @@
           muted
           loop
           playsinline
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = VideoPlaceholder)}
         ></video>
       {/if}