negodesign 0.0.68 → 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/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -5,7 +5,7 @@
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
   import Autoplay from "embla-carousel-autoplay";
   import type { GridProps } from "../../../../grid/data/types";
-  import SimpleGrid from "../../../../grid/ui/SimpleGrid.svelte";
+  import SimpleGrid from "../../../../grid/ui/ItemsSimpleGrid.svelte";
 
   type Props = {
     slotProps?: CarouselSlotProps;

package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte

@@ -24,7 +24,7 @@
 
 <div class="w-full flex justify-center">
   <div
-    class="w-[95%] p-2 rounded-xl
+    class="w-full p-2 rounded-xl
     {isBorder ? 'border border-gray-50 dark:border-gray-800' : ''} 
     {containerClass}"
   >
@@ -43,9 +43,8 @@
         {#if onButtonViewAll}
           <div>
             <Button
-              variant="ghost"
-              size="sm"
-              class="flex items-center gap-0.5"
+              variant="outline"
+              class="flex items-center gap-0.5 border"
               onclick={onButtonViewAll}
             >
               {$t("label.view.full")}

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

@@ -6,14 +6,17 @@ export interface ItemGridProps {
     description?: string;
     iconClass?: string;
     titleClass?: string;
+    itemClassName?: string;
     descriptionClass?: string;
     icon: string | IconSvgElement;
     onClick?: (id: string | number) => void;
 }
 export interface GridProps {
     items?: ItemGridProps[];
+    itemClassName?: string;
     className?: string;
     variant?: 1 | 2;
     isLoading?: boolean;
+    selectedKey?: string | number;
     onClick?: (id: string | number) => void;
 }

package/dist/components/core/grid/ui/01/Grid01.svelte

@@ -12,6 +12,7 @@
         iconClass,
         titleClass,
         description,
+        itemClassName,
         descriptionClass,
         onClick,
     }: ItemGridProps = $props();
@@ -21,7 +22,7 @@
     onclick={() => {
         if (id && onClick) onClick(id);
     }}
-    class="flex flex-col justify-center items-center gap-2 hover:bg-primary/30 rounded-xl"
+    class="flex flex-col justify-center items-center gap-2 rounded-xl {itemClassName}"
 >
     <IconRenderGrid {icon} {iconClass} {isLoading} />
     <TitleGrid {titleClass} {title} {isLoading} />

package/dist/components/core/grid/ui/02/Grid02.svelte

@@ -12,6 +12,7 @@
         description,
         iconClass,
         titleClass,
+        itemClassName,
         descriptionClass,
         onClick,
     }: ItemGridProps = $props();
@@ -21,7 +22,7 @@
     onclick={() => {
         if (id && onClick) onClick(id);
     }}
-    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer hover:bg-primary/30"
+    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer {itemClassName}"
 >
     <IconRenderGrid {icon} {iconClass} {isLoading} />
     <TitleGrid {titleClass} {title} {isLoading} />

package/dist/components/core/grid/ui/ItemsPanel.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { GridProps } from "../data/types";
+  import PanelCarousel from "./ItemsPanelCarousel.svelte";
+  import PanelGrid from "./ItemsPanelGrid.svelte";
+
+  let {
+    style = "grid",
+    onClick,
+    ...restProps
+  }: GridProps & {
+    style?: "inline" | "grid";
+  } = $props();
+
+  let selectedKey = $state<string | number | undefined>("");
+
+  function selectItem(id: string | number) {
+    selectedKey = `${id}`;
+    onClick?.(id);
+  }
+</script>
+
+{#if style == "inline"}
+  <PanelCarousel {...restProps} {selectedKey} onClick={selectItem} />
+{:else}
+  <PanelGrid {...restProps} {selectedKey} onClick={selectItem} />
+{/if}

package/dist/components/core/grid/ui/ItemsPanel.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { GridProps } from "../data/types";
+type $$ComponentProps = GridProps & {
+    style?: "inline" | "grid";
+};
+declare const ItemsPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ItemsPanel = ReturnType<typeof ItemsPanel>;
+export default ItemsPanel;

package/dist/components/core/grid/ui/ItemsPanelCarousel.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import * as Carousel from "../../../ui/carousel/index.js";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, isLoading, items, itemClassName, onClick }: GridProps =
+    $props();
+</script>
+
+<Carousel.Root>
+  <Carousel.Content>
+    {#if isLoading}
+      <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+        {#each Array.from({ length: 10 }) as _, i (`skeleton-${i}`)}
+          <Carousel.Item class="basis-auto relative">
+            {#if variant == 2}
+              <Grid02 title={`${i}`} description="" icon="" {isLoading} />
+            {:else}
+              <Grid01 title={`${i}`} description="" icon="" {isLoading} />
+            {/if}
+          </Carousel.Item>
+        {/each}
+      </div>
+    {:else}
+      {#each items as item, i (`panel-${i}`)}
+        <Carousel.Item class="basis-auto relative">
+          {#if variant == 2}
+            <Grid02 {...item} {onClick} {itemClassName} />
+          {:else}
+            <Grid01 {...item} {onClick} {itemClassName} />
+          {/if}
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </Carousel.Content>
+</Carousel.Root>

package/dist/components/core/grid/ui/ItemsPanelCarousel.svelte.d.ts

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

package/dist/components/core/grid/ui/{PanelGrid.svelte → ItemsPanelGrid.svelte}

@@ -4,7 +4,14 @@
   import Grid02 from "./02/Grid02.svelte";
   import Grid01 from "./01/Grid01.svelte";
 
-  let { variant, className, isLoading, items, onClick }: GridProps = $props();
+  let {
+    variant,
+    className,
+    isLoading,
+    items,
+    itemClassName,
+    onClick,
+  }: GridProps = $props();
 
   const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
 
@@ -14,8 +21,7 @@
 <div
   class="gap-4 my-2 {responsive.isMobile
     ? styleMobile
-    : 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 max-h-237.5 overflow-y-auto'} 
-    {className}"
+    : 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 max-h-237.5 overflow-y-auto'} {className}"
 >
   {#if isLoading}
     {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
@@ -28,9 +34,9 @@
   {:else}
     {#each items as item, i (i)}
       {#if variant == 2}
-        <Grid02 {...item} {onClick} />
+        <Grid02 {...item} {onClick} {itemClassName} />
       {:else}
-        <Grid01 {...item} {onClick} />
+        <Grid01 {...item} {onClick} {itemClassName} />
       {/if}
     {/each}
   {/if}

package/dist/components/core/grid/ui/ItemsPanelGrid.svelte.d.ts

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

package/dist/components/core/grid/ui/ItemsSimpleGrid.svelte.d.ts

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

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

@@ -9,9 +9,14 @@ export type ListItemProps = HTMLAttributes<HTMLAnchorElement> & {
 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;
@@ -24,14 +29,22 @@ 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;
@@ -40,6 +53,8 @@ export type NavigationMenuItemsProps = {
 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,21 +13,39 @@
   import NavigationMenuItemList from "./shared/navigation/NavigationMenuItemList.svelte";
   import NavigationMenuItems from "./shared/navigation/NavigationMenuItems.svelte";
 
-  let { menus: links, textClass }: 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)}
+<ul
+  class="flex list-none flex-1 flex-wrap items-center justify-center {textClass}"
+>
+  {#each menus as link, i (i)}
     {#if isCard(link)}
-      <NavigationMenuItemCard {...link} />
+      <NavigationMenuItemCard
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
     {:else if isGrid(link)}
-      <NavigationMenuItemGrid {...link} />
+      <NavigationMenuItemGrid
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
     {:else if isList(link)}
-      <NavigationMenuItemList {...link} />
+      <NavigationMenuItemList
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
     {:else if isItems(link)}
-      <NavigationMenuItems {...link} />
+      <NavigationMenuItems {...link} {textClass} {hoverClass} />
     {:else if isItem(link)}
-      <NavigationMenuItem {...link} />
+      <NavigationMenuItem {...link} {textClass} {hoverClass} />
     {/if}
   {/each}
-</ul>
+</ul>

package/dist/components/core/nav/ui/shared/MenuListItem.svelte

@@ -6,9 +6,14 @@
     content,
     href,
     icon,
+    textClass,
+    subTextClass,
     class: className,
     ...restProps
-  }: ListItemProps = $props();
+  }: ListItemProps & {
+    textClass?: string;
+    subTextClass?: string;
+  } = $props();
 </script>
 
 <li>
@@ -36,4 +41,4 @@
       {content}
     </p>
   </a>
-</li>
+</li>

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

@@ -1,4 +1,8 @@
 import type { ListItemProps } from "../../data/types";
-declare const MenuListItem: import("svelte").Component<ListItemProps, {}, "">;
+type $$ComponentProps = ListItemProps & {
+    textClass?: string;
+    subTextClass?: string;
+};
+declare const MenuListItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type MenuListItem = ReturnType<typeof MenuListItem>;
 export default MenuListItem;

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 }: 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"
-  >
-    {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

@@ -3,11 +3,18 @@
   import MenuListItem from "../MenuListItem.svelte";
   import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
+  let {
+    label,
+    header,
+    cards: items,
+    hoverClass,
+  }: NavigationMenuItemCardProps = $props();
 </script>
 
 {#snippet headerSnippet(label: string, description: string)}
-  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
+  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">
+    {label}
+  </div>
   <p
     class="text-sm leading-tight {header?.descriptionClass ||
       'text-muted-foreground'}"
@@ -16,10 +23,8 @@
   </p>
 {/snippet}
 
-<NavDropdown label={label ?? header?.label ?? ""}>
-  <ul
-    class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]"
-  >
+<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
         class="row-span-3 relative"
@@ -45,4 +50,4 @@
       {/each}
     {/if}
   </ul>
-</NavDropdown>
+</NavDropdown>