negodesign 0.0.68 → 0.0.70

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

@@ -3,7 +3,13 @@
   import MenuListItem from "../MenuListItem.svelte";
   import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, grids: items }: NavigationMenuItemGridProps = $props();
+  let {
+    label,
+    grids: items,
+    textClass,
+    subTextClass,
+    hoverClass,
+  }: NavigationMenuItemGridProps = $props();
 
   const cols = (): string => {
     const len = items?.length ?? 0;
@@ -17,13 +23,13 @@
   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}`}
     >
       {#each items as item, i (i)}
-        <MenuListItem {...item} />
+        <MenuListItem {...item} {textClass} {subTextClass} />
       {/each}
     </ul>
   {/if}

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

@@ -2,14 +2,17 @@
   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>
-        <a href={item.href} class="block rounded-xl p-2 no-underline hover:bg-muted">
+        <a
+          href={item.href}
+          class="block rounded-xl p-2 no-underline hover:bg-muted"
+        >
           <div class="font-medium">{item.title ?? ""}</div>
           <div class="text-muted-foreground">
             {item.content}
@@ -18,4 +21,4 @@
       </li>
     {/each}
   </ul>
-</NavDropdown>
+</NavDropdown>

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 }: 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>
@@ -18,4 +18,4 @@
       </li>
     {/each}
   </ul>
-</NavDropdown>
+</NavDropdown>

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.

package/dist/globals.css

@@ -9,6 +9,7 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
     --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
@@ -554,6 +555,9 @@
   .mt-5 {
     margin-top: calc(var(--spacing) * 5);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .mt-7 {
     margin-top: calc(var(--spacing) * 7);
   }
@@ -563,6 +567,9 @@
   .mt-12 {
     margin-top: calc(var(--spacing) * 12);
   }
+  .mt-16 {
+    margin-top: calc(var(--spacing) * 16);
+  }
   .mt-auto {
     margin-top: auto;
   }
@@ -752,6 +759,10 @@
     width: calc(var(--spacing) * 24);
     height: calc(var(--spacing) * 24);
   }
+  .size-256 {
+    width: calc(var(--spacing) * 256);
+    height: calc(var(--spacing) * 256);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -849,6 +860,9 @@
   .h-75 {
     height: calc(var(--spacing) * 75);
   }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
   .h-\[65px\] {
     height: 65px;
   }
@@ -1029,15 +1043,15 @@
   .w-144\.25 {
     width: calc(var(--spacing) * 144.25);
   }
+  .w-228 {
+    width: calc(var(--spacing) * 228);
+  }
   .w-\[15px\] {
     width: 15px;
   }
   .w-\[60\%\] {
     width: 60%;
   }
-  .w-\[95\%\] {
-    width: 95%;
-  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -1098,6 +1112,9 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-none {
+    max-width: none;
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -1701,6 +1718,9 @@
   .bg-accent {
     background-color: var(--accent);
   }
+  .bg-amber-50 {
+    background-color: var(--color-amber-50);
+  }
   .bg-background {
     background-color: var(--background);
   }
@@ -1905,6 +1925,9 @@
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
   .bg-red-900\/50 {
     background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1929,6 +1952,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/5 {
+    background-color: color-mix(in srgb, #fff 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
   .bg-white\/10 {
     background-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2009,6 +2038,9 @@
     --tw-gradient-to: var(--muted);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .mask-\[radial-gradient\(closest-side\,white\,transparent\)\] {
+    mask-image: radial-gradient(closest-side,white,transparent);
+  }
   .bg-clip-padding {
     background-clip: padding-box;
   }
@@ -2144,6 +2176,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-24 {
+    padding-block: calc(var(--spacing) * 24);
+  }
   .ps-4 {
     padding-inline-start: calc(var(--spacing) * 4);
   }
@@ -2168,6 +2203,9 @@
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
+  .pt-16 {
+    padding-top: calc(var(--spacing) * 16);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -2263,6 +2301,10 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
+  .text-lg\/8 {
+    font-size: var(--text-lg);
+    line-height: calc(var(--spacing) * 8);
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2363,6 +2405,9 @@
   .text-balance {
     text-wrap: balance;
   }
+  .text-pretty {
+    text-wrap: pretty;
+  }
   .wrap-break-word {
     overflow-wrap: break-word;
   }
@@ -2432,12 +2477,18 @@
   .text-gray-200 {
     color: var(--color-gray-200);
   }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
   .text-gray-800 {
     color: var(--color-gray-800);
   }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
   .text-green-500 {
     color: var(--color-green-500);
   }
@@ -2640,6 +2691,12 @@
   .ring-sidebar-ring {
     --tw-ring-color: var(--sidebar-ring);
   }
+  .ring-white\/10 {
+    --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
   .ring-white\/30 {
     --tw-ring-color: color-mix(in srgb, #fff 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3367,14 +3424,6 @@
     .hover\:bg-neutral-800:hover {
       background-color: var(--color-neutral-800);
     }
-    .hover\:bg-primary\/30:hover {
-      background-color: var(--primary);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-primary\/30:hover {
-        background-color: color-mix(in oklab, var(--primary) 30%, transparent);
-      }
-    }
     .hover\:bg-primary\/80:hover {
       background-color: var(--primary);
     }
@@ -3451,6 +3500,9 @@
     .hover\:text-foreground:hover {
       color: var(--foreground);
     }
+    .hover\:text-gray-100:hover {
+      color: var(--color-gray-100);
+    }
     .hover\:text-muted-foreground:hover {
       color: var(--muted-foreground);
     }
@@ -4190,6 +4242,12 @@
     .sm\:right-6 {
       right: calc(var(--spacing) * 6);
     }
+    .sm\:left-full {
+      left: 100%;
+    }
+    .sm\:-ml-80 {
+      margin-left: calc(var(--spacing) * -80);
+    }
     .sm\:flex {
       display: flex;
     }
@@ -4220,6 +4278,9 @@
     .sm\:gap-2\.5 {
       gap: calc(var(--spacing) * 2.5);
     }
+    .sm\:rounded-3xl {
+      border-radius: calc(var(--radius) * 2.2);
+    }
     .sm\:px-3\.5 {
       padding-inline: calc(var(--spacing) * 3.5);
     }
@@ -4229,12 +4290,18 @@
     .sm\:px-10 {
       padding-inline: calc(var(--spacing) * 10);
     }
+    .sm\:px-16 {
+      padding-inline: calc(var(--spacing) * 16);
+    }
     .sm\:py-12 {
       padding-block: calc(var(--spacing) * 12);
     }
     .sm\:py-14 {
       padding-block: calc(var(--spacing) * 14);
     }
+    .sm\:py-32 {
+      padding-block: calc(var(--spacing) * 32);
+    }
     .sm\:text-2xl {
       font-size: var(--text-2xl);
       line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -4480,6 +4547,9 @@
     .md\:pt-10 {
       padding-top: calc(var(--spacing) * 10);
     }
+    .md\:pt-24 {
+      padding-top: calc(var(--spacing) * 24);
+    }
     .md\:pb-10 {
       padding-bottom: calc(var(--spacing) * 10);
     }
@@ -4575,12 +4645,27 @@
     .lg\:-bottom-3 {
       bottom: calc(var(--spacing) * -3);
     }
+    .lg\:left-1\/2 {
+      left: calc(1 / 2 * 100%);
+    }
+    .lg\:mx-0 {
+      margin-inline: 0px;
+    }
     .lg\:mt-5 {
       margin-top: calc(var(--spacing) * 5);
     }
+    .lg\:mt-8 {
+      margin-top: calc(var(--spacing) * 8);
+    }
+    .lg\:ml-0 {
+      margin-left: 0px;
+    }
     .lg\:block {
       display: block;
     }
+    .lg\:flex {
+      display: flex;
+    }
     .lg\:h-20 {
       height: calc(var(--spacing) * 20);
     }
@@ -4629,6 +4714,17 @@
     .lg\:min-w-150 {
       min-width: calc(var(--spacing) * 150);
     }
+    .lg\:flex-auto {
+      flex: auto;
+    }
+    .lg\:-translate-x-1\/2 {
+      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .lg\:translate-y-0 {
+      --tw-translate-y: 0px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
     .lg\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4644,24 +4740,42 @@
     .lg\:grid-cols-\[1fr_26rem\] {
       grid-template-columns: 1fr 26rem;
     }
+    .lg\:justify-start {
+      justify-content: flex-start;
+    }
     .lg\:gap-10 {
       gap: calc(var(--spacing) * 10);
     }
     .lg\:gap-15 {
       gap: calc(var(--spacing) * 15);
     }
+    .lg\:gap-x-20 {
+      column-gap: calc(var(--spacing) * 20);
+    }
     .lg\:self-start {
       align-self: flex-start;
     }
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }
+    .lg\:px-24 {
+      padding-inline: calc(var(--spacing) * 24);
+    }
+    .lg\:py-32 {
+      padding-block: calc(var(--spacing) * 32);
+    }
+    .lg\:pt-0 {
+      padding-top: 0px;
+    }
     .lg\:pt-20 {
       padding-top: calc(var(--spacing) * 20);
     }
     .lg\:pl-12 {
       padding-left: calc(var(--spacing) * 12);
     }
+    .lg\:text-left {
+      text-align: left;
+    }
     .lg\:text-\[80px\] {
       font-size: 80px;
     }