negodesign 0.0.69 → 0.0.70

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { CtaCardImageBannerProps } from "./types";
+
+  let {
+    title,
+    description,
+    primaryText,
+    secondaryText,
+    primaryHref,
+    secondaryHref,
+    onClickPrimary,
+    onClickSecondary,
+    imageSrc = "https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png",
+    imageAlt = "Imagem de destaque",
+    imageWidth = 1824,
+    imageHeight = 1080,
+    class: className = "",
+    imageContainerClass = "",
+  }: CtaCardImageBannerProps = $props();
+</script>
+
+<div class="bg-white">
+  <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
+    <div
+      class="relative isolate overflow-hidden bg-gradient px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0 {className}"
+    >
+      <svg
+        viewBox="0 0 1024 1024"
+        aria-hidden="true"
+        class="absolute top-1/2 left-1/2 -z-10 size-256 -translate-y-1/2 mask-[radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+      >
+        <circle
+          r="512"
+          cx="512"
+          cy="512"
+          fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
+          fill-opacity="0.7"
+        />
+        <defs>
+          <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
+            <stop stop-color="#7775D6" />
+            <stop offset="1" stop-color="#E935C1" />
+          </radialGradient>
+        </defs>
+      </svg>
+
+      {#snippet pill(
+        label: string,
+        href: string | undefined,
+        onClick: (() => void) | undefined,
+        style: "primary" | "secondary",
+      )}
+        {#if href}
+          <a
+            {href}
+            class={style === "primary"
+              ? "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              : "text-sm/6 font-semibold text-white hover:text-gray-100"}
+          >
+            {label}
+            {#if style === "secondary"}<span aria-hidden="true">→</span>{/if}
+          </a>
+        {:else}
+          <button
+            type="button"
+            onclick={() => onClick?.()}
+            class={style === "primary"
+              ? "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              : "text-sm/6 font-semibold text-white hover:text-gray-100"}
+          >
+            {label}
+            {#if style === "secondary"}<span aria-hidden="true">→</span>{/if}
+          </button>
+        {/if}
+      {/snippet}
+
+      <div
+        class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left"
+      >
+        <h2
+          class="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"
+        >
+          {title}
+        </h2>
+        {#if description}
+          <p class="mt-6 text-lg/8 text-pretty text-gray-300">{description}</p>
+        {/if}
+        <div
+          class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
+        >
+          {@render pill(primaryText, primaryHref, onClickPrimary, "primary")}
+          {#if secondaryText}
+            {@render pill(secondaryText, secondaryHref, onClickSecondary, "secondary")}
+          {/if}
+        </div>
+      </div>
+      <div class="relative mt-16 h-80 lg:mt-8 {imageContainerClass}">
+        <img
+          src={imageSrc}
+          alt={imageAlt}
+          width={imageWidth}
+          height={imageHeight}
+          loading="lazy"
+          class="absolute top-0 left-0 w-228 max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
+        />
+      </div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -71,3 +71,40 @@ export type CtaCardBannerProps = {
         color: string;
     }>;
 };
+/**
+ * CTA banner com imagem de destaque em fundo gradiente.
+ * Título, descrição e até dois CTAs (primário e secundário), cada um com
+ * texto, href e/ou callback de clique, além da imagem e seus atributos.
+ * Usa `bg-gradient` como fundo padrão (customizável via `containerClass`).
+ * @component
+ */
+export type CtaCardImageBannerProps = {
+    /** Título principal do banner. */
+    title: string;
+    /** Texto de apoio / descrição. */
+    description?: string;
+    /** Texto do CTA primário. */
+    primaryText: string;
+    /** href do CTA primário (link). */
+    primaryHref?: string;
+    /** Chamado ao clicar no CTA primário. */
+    onClickPrimary?: () => void;
+    /** Texto do CTA secundário. */
+    secondaryText?: string;
+    /** href do CTA secundário (link). */
+    secondaryHref?: string;
+    /** Chamado ao clicar no CTA secundário. */
+    onClickSecondary?: () => void;
+    /** URL da imagem de destaque. */
+    imageSrc?: string;
+    /** Texto alternativo da imagem. */
+    imageAlt?: string;
+    /** Largura da imagem (atributo width). */
+    imageWidth?: number;
+    /** Altura da imagem (atributo height). */
+    imageHeight?: number;
+    /** Classe CSS adicional para o artigo (fundo). */
+    class?: string;
+    /** Classe CSS do container da imagem. */
+    imageContainerClass?: string;
+};

package/dist/components/core/nav/data/types.d.ts

@@ -10,11 +10,13 @@ export type NavigationMenuItemProps = {
     label: string;
     href?: string;
     textClass?: string;
+    hoverClass?: string;
 };
 export type NavigationMenuItemCardProps = {
     label?: string;
     textClass?: string;
     subTextClass?: string;
+    hoverClass?: string;
     header?: {
         label: string;
         description: string;
@@ -28,18 +30,21 @@ export type NavigationMenuItemCardProps = {
 export type NavigationMenuItemGridProps = {
     label: string;
     textClass?: string;
+    hoverClass?: string;
     subTextClass?: string;
     grids?: ListItemProps[];
 };
 export type NavigationMenuItemListProps = {
     label: string;
     textClass?: string;
+    hoverClass?: string;
     subTextClass?: string;
     list?: ListItemProps[];
 };
 export type NavigationMenuItemsProps = {
     label: string;
     textClass?: string;
+    hoverClass?: string;
     items?: {
         title: string;
         href: string;
@@ -49,6 +54,7 @@ export type ComplexMenuProps = IMenuProps & {
     menus: (NavigationMenuItemProps | NavigationMenuItemListProps | NavigationMenuItemCardProps | NavigationMenuItemGridProps | NavigationMenuItemsProps)[];
     textClass?: string;
     subTextClass?: string;
+    hoverClass?: string;
 };
 export type MenuVarientProps = ComplexMenuProps | SimpleMenuProps;
 export type MenuProps = IMenuProps & {

package/dist/components/core/nav/ui/ComplexMenu.svelte

@@ -13,23 +13,39 @@
   import NavigationMenuItemList from "./shared/navigation/NavigationMenuItemList.svelte";
   import NavigationMenuItems from "./shared/navigation/NavigationMenuItems.svelte";
 
-  let { menus: links, textClass, subTextClass }: ComplexMenuProps = $props();
+  let { menus, textClass, subTextClass, hoverClass }: ComplexMenuProps =
+    $props();
 </script>
 
 <ul
   class="flex list-none flex-1 flex-wrap items-center justify-center {textClass}"
 >
-  {#each links as link, i (i)}
+  {#each menus as link, i (i)}
     {#if isCard(link)}
-      <NavigationMenuItemCard {...link} {textClass} {subTextClass} />
+      <NavigationMenuItemCard
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
     {:else if isGrid(link)}
-      <NavigationMenuItemGrid {...link} {textClass} {subTextClass} />
+      <NavigationMenuItemGrid
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
     {:else if isList(link)}
-      <NavigationMenuItemList {...link} {textClass} {subTextClass} />
+      <NavigationMenuItemList
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
     {:else if isItems(link)}
-      <NavigationMenuItems {...link} {textClass} />
+      <NavigationMenuItems {...link} {textClass} {hoverClass} />
     {:else if isItem(link)}
-      <NavigationMenuItem {...link} {textClass} />
+      <NavigationMenuItem {...link} {textClass} {hoverClass} />
     {/if}
   {/each}
 </ul>

package/dist/components/core/nav/ui/shared/navigation/NavDropdown.svelte

@@ -6,11 +6,15 @@
 	let {
 		label,
 		className = "",
+		hoverClass = "",
+		onClick,
 		children,
 	}: {
 		label: string;
 		className?: string;
-		children: Snippet;
+		hoverClass?: string;
+		children?: Snippet;
+		onClick?: () => void;
 	} = $props();
 
 	let open = $state(false);
@@ -50,25 +54,30 @@
 		type="button"
 		aria-expanded={open}
 		onclick={() => {
-			clearTimeout(closeTimer);
-			open = !open;
+			if (children) {
+				clearTimeout(closeTimer);
+				open = !open;
+			}
+			if (onClick) onClick();
 		}}
-		class="inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none select-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 {open
-			? 'bg-muted'
+		class="inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none select-none hover:{hoverClass} focus:{hoverClass} focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 {open
+			? hoverClass
 			: ''}"
 	>
 		{label}
-		<HugeiconsIcon
-			icon={ArrowDown01Icon}
-			strokeWidth={2}
-			class={`relative top-px ml-1 size-3 transition-transform duration-300 ${
-				open ? "rotate-180" : ""
-			}`}
-			aria-hidden="true"
-		/>
+		{#if children}
+			<HugeiconsIcon
+				icon={ArrowDown01Icon}
+				strokeWidth={2}
+				class={`relative top-px ml-1 size-3 transition-transform duration-300 ${
+					open ? "rotate-180" : ""
+				}`}
+				aria-hidden="true"
+			/>
+		{/if}
 	</button>
 
-	{#if open}
+	{#if open && children}
 		<div
 			class="absolute left-0 top-full z-50 md:z-100 mt-1.5 w-max rounded-2xl bg-popover p-2.5 pr-3 overflow-hidden text-popover-foreground shadow-2xl ring-1 ring-foreground/5"
 		>

package/dist/components/core/nav/ui/shared/navigation/NavDropdown.svelte.d.ts

@@ -2,7 +2,9 @@ import type { Snippet } from "svelte";
 type $$ComponentProps = {
     label: string;
     className?: string;
-    children: Snippet;
+    hoverClass?: string;
+    children?: Snippet;
+    onClick?: () => void;
 };
 declare const NavDropdown: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavDropdown = ReturnType<typeof NavDropdown>;

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItem.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
   import type { NavigationMenuItemProps } from "../../../data/types";
+  import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, href, textClass }: NavigationMenuItemProps = $props();
+  let { label, href, textClass, hoverClass }: NavigationMenuItemProps =
+    $props();
 </script>
 
-<li>
-  <a
-    {href}
-    class="inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none select-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 {textClass}"
-  >
-    {label}
-  </a>
-</li>
+<NavDropdown
+  {label}
+  className="hidden md:block"
+  {hoverClass}
+  onClick={() => {
+    if (href) goto(href);
+  }}
+/>

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemCard.svelte

@@ -7,8 +7,7 @@
     label,
     header,
     cards: items,
-    textClass,
-    subTextClass,
+    hoverClass,
   }: NavigationMenuItemCardProps = $props();
 </script>
 
@@ -24,7 +23,7 @@
   </p>
 {/snippet}
 
-<NavDropdown label={label ?? header?.label ?? ""}>
+<NavDropdown label={label ?? header?.label ?? ""} {hoverClass}>
   <ul class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
     {#if header}
       <li

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte

@@ -8,6 +8,7 @@
     grids: items,
     textClass,
     subTextClass,
+    hoverClass,
   }: NavigationMenuItemGridProps = $props();
 
   const cols = (): string => {
@@ -22,7 +23,7 @@
   const gridCols = $derived(cols());
 </script>
 
-<NavDropdown {label}>
+<NavDropdown {label} {hoverClass}>
   {#if items}
     <ul
       class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 max-h-75 overflow-y-auto ${gridCols}`}

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemList.svelte

@@ -2,10 +2,10 @@
   import type { NavigationMenuItemListProps } from "../../../data/types";
   import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, list }: NavigationMenuItemListProps = $props();
+  let { label, list, hoverClass }: NavigationMenuItemListProps = $props();
 </script>
 
-<NavDropdown {label} className="hidden md:block">
+<NavDropdown {label} className="hidden md:block" {hoverClass}>
   <ul class="grid w-75 gap-4 p-2">
     {#each list as item, i (i)}
       <li>

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItems.svelte

@@ -2,10 +2,10 @@
   import type { NavigationMenuItemsProps } from "../../../data/types";
   import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, items, textClass }: NavigationMenuItemsProps = $props();
+  let { label, items, hoverClass }: NavigationMenuItemsProps = $props();
 </script>
 
-<NavDropdown {label} className="hidden md:block">
+<NavDropdown {label} className="hidden md:block" {hoverClass}>
   <ul class="grid min-w-50 gap-4 p-1 md:p-2">
     {#each items as item, i (i)}
       <li>

package/dist/components/core/panel/NotFoundEmpty.svelte

@@ -3,20 +3,7 @@
   import { t } from "../../../i18n";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import { Search01Icon } from "@hugeicons/core-free-icons";
-  import type { Snippet } from "svelte";
-  import type { IconSvgElement } from "@hugeicons/svelte";
-
-  type Props = {
-    title?: string;
-    description?: string;
-    icon?: IconSvgElement;
-    className?: string;
-    actionHref?: string;
-    actionLabel?: string;
-    onAction?: () => void;
-    showAction?: boolean;
-    children?: Snippet;
-  };
+  import type { NotFoundEmptyProps } from "./type";
 
   let {
     title,
@@ -28,7 +15,7 @@
     onAction,
     showAction = false,
     children,
-  }: Props = $props();
+  }: NotFoundEmptyProps = $props();
 
   const resolvedTitle = $derived(title ?? $t("empty.title"));
   const resolvedDescription = $derived(description ?? $t("empty.description"));

package/dist/components/core/panel/NotFoundEmpty.svelte.d.ts

@@ -1,16 +1,4 @@
-import type { Snippet } from "svelte";
-import type { IconSvgElement } from "@hugeicons/svelte";
-type Props = {
-    title?: string;
-    description?: string;
-    icon?: IconSvgElement;
-    className?: string;
-    actionHref?: string;
-    actionLabel?: string;
-    onAction?: () => void;
-    showAction?: boolean;
-    children?: Snippet;
-};
-declare const NotFoundEmpty: import("svelte").Component<Props, {}, "">;
+import type { NotFoundEmptyProps } from "./type";
+declare const NotFoundEmpty: import("svelte").Component<NotFoundEmptyProps, {}, "">;
 type NotFoundEmpty = ReturnType<typeof NotFoundEmpty>;
 export default NotFoundEmpty;

package/dist/components/core/panel/type.d.ts

@@ -1,5 +1,30 @@
 import type { CarouselPlugins } from "../../ui/carousel/context";
 import type { Snippet } from "svelte";
+import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Props do NotFoundEmpty — estado vazio com ícone, título, descrição
+ * e ação (link ou botão) quando não há conteúdo a exibir.
+ */
+export type NotFoundEmptyProps = {
+    /** Título do estado vazio. Padrão: tradução de "empty.title" */
+    title?: string;
+    /** Descrição/apoio do estado vazio. Padrão: tradução de "empty.description" */
+    description?: string;
+    /** Ícone exibido na área de media. Padrão: ícone de busca */
+    icon?: IconSvgElement;
+    /** Classe CSS adicional para o container */
+    className?: string;
+    /** URL de destino da ação (link) quando não há onAction */
+    actionHref?: string;
+    /** Texto da ação (link ou botão) */
+    actionLabel?: string;
+    /** Callback ao clicar na ação (renderiza um botão) */
+    onAction?: () => void;
+    /** Exibe a ação de suporte mesmo sem onAction */
+    showAction?: boolean;
+    /** Snippet de conteúdo customizado no lugar da ação padrão */
+    children?: Snippet;
+};
 /**
  * Props do slot/container de carousel (CarouselSlot).
  * Controla botões de navegação, bordas, plugins e conteúdo customizado.