negodesign 0.0.29 → 0.0.30

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/{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

@@ -19,7 +19,7 @@ export type BannerProps = {
     buttonClass?: string;
     tagBgClass?: string;
 };
-export type BannerNotificationProps = {
+export type NotificationBannerProps = {
     /** Strong text before the separator, e.g. "GeneriCon 2023" */
     strongText?: string;
     /** Main description text */
@@ -40,3 +40,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}
 

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

@@ -58,6 +58,7 @@ export interface CardPromotionProps {
     oldPrice?: string | number;
     newPrice?: string | number;
     buttonBuyText?: string;
+    buttonBuyClass?: string;
     isDescriptionIcon?: boolean;
     isDescriptionLabel?: boolean;
     onClickBuy?: (id: string | number) => void;
@@ -72,8 +73,10 @@ export interface CardHighlightProps {
     className?: string;
     isFavorite?: boolean;
     isLoading?: boolean;
+    isExpandButton?: boolean;
     content?: string;
     buttonText?: string;
+    buttonClass?: string;
     isDescriptionIcon?: boolean;
     isDescriptionLabel?: boolean;
     tags?: CardTagsProps[];

package/dist/components/core/carousel/grid/media/types.d.ts

@@ -4,6 +4,7 @@ import type { CarouselHeaderProps } from "../../types";
 export interface CarouselMediaProps {
     headerProps?: CarouselHeaderProps;
     slotProps?: CarouselSlotProps;
+    gridClass?: string;
     variant?: 1 | 2;
     items: CardMediaProps[];
     isLoading?: boolean;

package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte

@@ -9,6 +9,7 @@
   const {
     headerProps,
     slotProps,
+    gridClass,
     items,
     variant,
     isLoading = false,
@@ -18,7 +19,7 @@
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot {slotProps} totalItems={items.length}>
+  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
     {#if isLoading}
       {#each Array.from( { length: responsive.isMobile ? 5 : 9 }, ) as _, i (`loading-${i}`)}
         {#if responsive.isMobile}

package/dist/components/core/carousel/grid/profile/types.d.ts

@@ -4,6 +4,7 @@ import type { CarouselHeaderProps } from "../../types";
 export interface CarouselProfileProps {
     headerProps?: CarouselHeaderProps;
     slotProps?: CarouselSlotProps;
+    gridClass?: string;
     variant?: 1 | 2;
     items: CardProfileProps[];
     isLoading?: boolean;

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -9,6 +9,7 @@
   const {
     headerProps,
     slotProps,
+    gridClass,
     items,
     variant,
     isLoading = false,
@@ -18,12 +19,9 @@
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot
-    {slotProps}
-    totalItems={items.length}
-  >
+  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
     {#if isLoading}
-      {#each Array.from({ length: responsive.isMobile ? 5 : 9 }) as _, i (`loading-${i}`)}
+      {#each Array.from( { length: responsive.isMobile ? 5 : 9 }, ) as _, i (`loading-${i}`)}
         {#if responsive.isMobile}
           <Carousel.Item class="pl-2 basis-auto">
             <CardProfile id={i} {variant} isLoading />

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -8,20 +8,15 @@
   type Props = {
     slotProps?: CarouselSlotProps;
     totalItems: number;
+    gridClass?: string;
     children: Snippet;
   };
 
-  const {
-    slotProps,
-    totalItems,
-    children,
-  }: Props = $props();
+  const { slotProps, totalItems, gridClass, children }: Props = $props();
 
   const responsive = useDevice();
 
-  const colsClass = $derived(
-    totalItems <= 4 ? "grid-cols-2" : "grid-cols-3"
-  );
+  const colsClass = $derived(totalItems <= 2 ? "grid-cols-2" : "grid-cols-3");
 </script>
 
 {#if responsive.isMobile}
@@ -32,7 +27,7 @@
     {@render children()}
   </CarouselSlot>
 {:else}
-  <div class="grid {colsClass} gap-4 p-2">
+  <div class="grid {colsClass} gap-4 p-2 {gridClass}">
     {@render children()}
   </div>
 {/if}

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte.d.ts

@@ -3,6 +3,7 @@ import type { CarouselSlotProps } from "../../../../panel/type";
 type Props = {
     slotProps?: CarouselSlotProps;
     totalItems: number;
+    gridClass?: string;
     children: Snippet;
 };
 declare const CarouselGridSlot: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +1,23 @@
+export interface FooterLinkItem {
+    text: string;
+    href?: string;
+}
+export interface FooterSocialItem {
+    icon: "facebook" | "instagram" | "x" | "github" | "youtube" | "linkedin";
+    text: string;
+    href?: string;
+}
+export interface FooterColumnProps {
+    title: string;
+    items: FooterLinkItem[];
+}
+export interface FooterProps {
+    items: FooterColumnProps[];
+    logo?: string;
+    isNewsletter?: boolean;
+    socialsMedia: FooterSocialItem[];
+    companyName?: string;
+    newsletterTitle?: string;
+    newsletterDescription?: string;
+    onSubscribe?: (email: string) => void;
+}

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

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