negodesign 0.0.28 → 0.0.30

package/dist/components/core/banner/AdCardBanner.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/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-3xl 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/NotificationBanner.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { NotificationBannerProps } from "./types";
+
+  let {
+    strongText,
+    description,
+    ctaText,
+    ctaHref,
+    onCtaClick,
+    onDismiss,
+    bgClass = "bg-gray-800/50",
+    textClass = "text-gray-100",
+    ctaClass,
+    class: className = "",
+  }: NotificationBannerProps = $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/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

@@ -0,0 +1,63 @@
+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 NotificationBannerProps = {
+    /** 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;
+};
+/**
+ * "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/banner/types.js

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

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">
@@ -97,14 +85,19 @@
       />
     </div>
 
-    <CardTags {tags} {isLoading} />
-
-    {#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 tags && tags.length > 0}
+      <div class="w-full mb-2">
+        <CardTags {tags} />
+      </div>
     {/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">
@@ -93,16 +81,19 @@
       />
     </div>
 
-    <div class="my-2">
-      <CardTags {tags} {isLoading} />
-    </div>
-
-    {#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 tags && tags.length > 0}
+      <div class="my-2">
+        <CardTags {tags} {isLoading} />
+      </div>
     {/if}
+
+    <CardButton
+      {id}
+      {isLoading}
+      className={buttonClass}
+      isFlex={isExpandButton}
+      onClick={() => onClickBtn!(id)}
+      text={buttonText || $t("label.buy")}
+    />
   </div>
 </article>

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;