negodesign 0.0.55 → 0.0.57

package/dist/components/core/grid/ui/shared/DescriptionGrid.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    let {
+        description,
+        descriptionClass,
+    }: {
+        description?: string;
+        descriptionClass?: string;
+    } = $props();
+</script>
+
+{#if description}
+    <p
+        class="{descriptionClass} text-center min-w-48 md:w-52 lg:w-56 text-muted-foreground line-clamp-2 md:line-clamp-3"
+    >
+        {description}
+    </p>
+{/if}

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    description?: string;
+    descriptionClass?: string;
+};
+declare const DescriptionGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type DescriptionGrid = ReturnType<typeof DescriptionGrid>;
+export default DescriptionGrid;

package/dist/components/core/grid/ui/shared/IconRenderGrid.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { IconSvgElement } from "@hugeicons/svelte";
+
+    let {
+        icon,
+    }: {
+        icon: string | IconSvgElement;
+    } = $props();
+</script>
+
+{#if typeof icon === "string"}
+    <i class="{icon} text-4xl md:text-6xl"></i>
+{:else}
+    <HugeiconsIcon {icon} class="size-8 md:size-10" />
+{/if}

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

@@ -0,0 +1,7 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+type $$ComponentProps = {
+    icon: string | IconSvgElement;
+};
+declare const IconRenderGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type IconRenderGrid = ReturnType<typeof IconRenderGrid>;
+export default IconRenderGrid;

package/dist/components/core/grid/ui/shared/TitleGrid.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    let {
+        title,
+        titleClass,
+    }: {
+        title?: string;
+        titleClass?: string;
+    } = $props();
+</script>
+
+<p class={titleClass}>{title}</p>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    title?: string;
+    titleClass?: string;
+};
+declare const TitleGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type TitleGrid = ReturnType<typeof TitleGrid>;
+export default TitleGrid;

package/dist/components/core/hero/SimpleHero.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-  import { Button } from "../../ui/button/index.js";
-  import type { HeroSimpleProps } from "./types";
-  let {
-    title,
-    subTitle,
-    description,
-    image,
-    buttons,
-    titleClass,
-    subTitleClass,
-    descriptionClass,
-    imageClass,
-  }: HeroSimpleProps = $props();
-</script>
-
-<section class="relative flex p-2">
-  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
-    <div class="flex justify-center items-center">
-      <div class="space-y-1">
-        {#if title}
-          <h1
-            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
-          >
-            {title}
-          </h1>
-        {/if}
-        {#if subTitle}
-          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
-            {subTitle}
-          </p>
-        {/if}
-        {#if description}
-          <p
-            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
-          >
-            {description}
-          </p>
-        {/if}
-        {#if buttons}
-          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
-            {#each buttons as button, i (i)}
-              <Button
-                href={button.href}
-                class={button.className}
-                onclick={button.onClick}
-              >
-                {button.label}
-              </Button>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    </div>
-    <div class="flex justify-center items-center">
-      {#if image}
-        <img
-          src={image}
-          alt={image}
-          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
-        />
-      {/if}
-    </div>
-  </div>
-</section>
+<script lang="ts">
+  import { Button } from "../../ui/button/index.js";
+  import type { HeroSimpleProps } from "./types";
+  let {
+    title,
+    subTitle,
+    description,
+    image,
+    buttons,
+    titleClass,
+    subTitleClass,
+    descriptionClass,
+    imageClass,
+  }: HeroSimpleProps = $props();
+</script>
+
+<section class="relative flex p-2">
+  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
+    <div class="flex justify-center items-center">
+      <div class="space-y-1">
+        {#if title}
+          <h1
+            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
+          >
+            {title}
+          </h1>
+        {/if}
+        {#if subTitle}
+          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
+            {subTitle}
+          </p>
+        {/if}
+        {#if description}
+          <p
+            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
+          >
+            {description}
+          </p>
+        {/if}
+        {#if buttons}
+          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
+            {#each buttons as button, i (i)}
+              <Button
+                href={button.href}
+                class={button.className}
+                onclick={button.onClick}
+              >
+                {button.label}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-center items-center">
+      {#if image}
+        <img
+          src={image}
+          alt={image}
+          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
+        />
+      {/if}
+    </div>
+  </div>
+</section>

package/dist/components/core/label/LabelOr.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import Separator from "../../ui/separator/separator.svelte";
-  import { t } from "../../../i18n";
-
-  type Props = {
-    variant?: "SEPARATOR";
-  };
-
-  let { variant }: Props = $props();
-</script>
-
-{#if variant === "SEPARATOR"}
-  <div class="relative my-1 text-center">
-    <div class="absolute inset-0 flex items-center">
-      <Separator />
-    </div>
-    <span
-      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
-    >
-      {$t("label.or")}
-    </span>
-  </div>
-{:else}
-  {$t("label.or")}
-{/if}
+<script lang="ts">
+  import Separator from "../../ui/separator/separator.svelte";
+  import { t } from "../../../i18n";
+
+  type Props = {
+    variant?: "SEPARATOR";
+  };
+
+  let { variant }: Props = $props();
+</script>
+
+{#if variant === "SEPARATOR"}
+  <div class="relative my-1 text-center">
+    <div class="absolute inset-0 flex items-center">
+      <Separator />
+    </div>
+    <span
+      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
+    >
+      {$t("label.or")}
+    </span>
+  </div>
+{:else}
+  {$t("label.or")}
+{/if}

package/dist/components/core/link/link-forget-password.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.forget.password")}!
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.forget.password")}!
+</a>

package/dist/components/core/link/link-privacy-polity.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.privacy-policy.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.privacy-policy.label")}
+</a>

package/dist/components/core/link/link-terms-of-service.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.terms-of-service.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.terms-of-service.label")}
+</a>

package/dist/components/core/nav/data/complex-menu-utils.d.ts

@@ -0,0 +1,7 @@
+import type { NavigationMenuItemProps, NavigationMenuItemListProps, NavigationMenuItemCardProps, NavigationMenuItemGridProps, NavigationMenuItemsProps } from "./types";
+export type ComplexMenuItemSlots = NavigationMenuItemCardProps | NavigationMenuItemGridProps | NavigationMenuItemListProps | NavigationMenuItemsProps | NavigationMenuItemProps;
+export declare function isCard(item: ComplexMenuItemSlots): item is NavigationMenuItemCardProps;
+export declare function isGrid(item: ComplexMenuItemSlots): item is NavigationMenuItemGridProps;
+export declare function isList(item: ComplexMenuItemSlots): item is NavigationMenuItemListProps;
+export declare function isItems(item: ComplexMenuItemSlots): item is NavigationMenuItemsProps;
+export declare function isItem(item: ComplexMenuItemSlots): item is NavigationMenuItemProps;

package/dist/components/core/nav/data/complex-menu-utils.js

@@ -0,0 +1,15 @@
+export function isCard(item) {
+    return "header" in item && "cards" in item;
+}
+export function isGrid(item) {
+    return "grids" in item && "label" in item;
+}
+export function isList(item) {
+    return "list" in item && "label" in item;
+}
+export function isItems(item) {
+    return "items" in item && "label" in item;
+}
+export function isItem(item) {
+    return "href" in item && "label" in item;
+}

package/dist/components/core/nav/data/nav-menu.d.ts

@@ -1,4 +1,16 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Props do logotipo no NavMenu.
+ */
+export interface NavMenuButtonProps {
+    buttonClass?: string;
+    textButtonLogin?: string;
+    textButtonRegister?: string;
+    /** Callback ao clicar no botão Login */
+    onclickButtonLogin?: () => void;
+    /** Callback ao clicar no botão Registar */
+    onclickButtonRegister?: () => void;
+}
 /**
  * Props do logotipo no NavMenu.
  */
@@ -49,11 +61,7 @@ export interface NavMenuActionsProps {
     /** Callback ao clicar na ação */
     onclick?: () => void;
 }
-/**
- * Props do componente NavMenu — barra de navegação principal
- * com logo, links, ações (login/registo), language switcher e light switch.
- */
-export interface NavMenuProps {
+export type IMenuProps = {
     /** Key nav menu */
     menuKey?: string;
     /** Key CSS nav menu */
@@ -68,12 +76,18 @@ export interface NavMenuProps {
     buttonClass?: string;
     /** Configuração do logotipo */
     logo?: NavMenuLogoProps;
-    /** Lista de links de navegação */
-    links: NavMenuLinksProps[];
     /** Lista de ações (ex: Login, Registar) */
     actions?: NavMenuActionsProps[];
     /** Alinhamento dos links e das ações */
     align?: 'LINK_SEPARATED_ACTIONS' | 'LINK_INTO_ACTIONS';
+};
+/**
+ * Props do componente NavMenu — barra de navegação principal
+ * com logo, links, ações (login/registo), language switcher e light switch.
+ */
+export interface SimpleMenuProps extends IMenuProps {
+    /** Lista de links de navegação */
+    links: NavMenuLinksProps[];
     /** Exibe o interruptor de tema (claro/escuro) */
     isLightSwitch?: boolean;
     /** Exibe o seletor de idioma */

package/dist/components/core/nav/{ui/shared → data}/types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
+import type { IMenuProps, NavMenuButtonProps, NavMenuLogoProps, SimpleMenuProps } from "./nav-menu";
 export type ListItemProps = HTMLAttributes<HTMLAnchorElement> & {
     title: string;
     href: string;
@@ -36,6 +37,18 @@ export type NavigationMenuItemsProps = {
         href: string;
     }[];
 };
-export type MenuProps = {
-    links: (NavigationMenuItemProps | NavigationMenuItemListProps | NavigationMenuItemCardProps | NavigationMenuItemGridProps | NavigationMenuItemsProps)[];
+export type ComplexMenuProps = IMenuProps & {
+    menus: (NavigationMenuItemProps | NavigationMenuItemListProps | NavigationMenuItemCardProps | NavigationMenuItemGridProps | NavigationMenuItemsProps)[];
+    textClass?: string;
+};
+export type MenuVarientProps = ComplexMenuProps | SimpleMenuProps;
+export type MenuProps = IMenuProps & {
+    logo?: NavMenuLogoProps;
+    navMenu: MenuVarientProps;
+    navMenuButton?: NavMenuButtonProps;
+    isBorder?: boolean;
+    /** Exibe o interruptor de tema (claro/escuro) */
+    isLightSwitch?: boolean;
+    /** Exibe o seletor de idioma */
+    isLanguageSwitcher?: boolean;
 };

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import * as NavigationMenu from "../../../ui/navigation-menu/index.js";
+  import type { ComplexMenuProps } from "../data/types";
+  import {
+    isCard,
+    isGrid,
+    isList,
+    isItems,
+    isItem,
+  } from "../data/complex-menu-utils";
+  import NavigationMenuItemGrid from "./shared/navigation/NavigationMenuItemGrid.svelte";
+  import NavigationMenuItemCard from "./shared/navigation/NavigationMenuItemCard.svelte";
+  import NavigationMenuItem from "./shared/navigation/NavigationMenuItem.svelte";
+  import NavigationMenuItemList from "./shared/navigation/NavigationMenuItemList.svelte";
+  import NavigationMenuItems from "./shared/navigation/NavigationMenuItems.svelte";
+
+  let { menus: links, textClass }: ComplexMenuProps = $props();
+</script>
+
+<NavigationMenu.Root viewport={true}>
+  <NavigationMenu.List class="flex-wrap {textClass}">
+    {#each links as link, i (i)}
+      {#if isCard(link)}
+        <NavigationMenuItemCard {...link} />
+      {:else if isGrid(link)}
+        <NavigationMenuItemGrid {...link} />
+      {:else if isList(link)}
+        <NavigationMenuItemList {...link} />
+      {:else if isItems(link)}
+        <NavigationMenuItems {...link} />
+      {:else if isItem(link)}
+        <NavigationMenuItem {...link} />
+      {/if}
+    {/each}
+  </NavigationMenu.List>
+</NavigationMenu.Root>

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

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

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

@@ -1,66 +1,70 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../ui/navigation-menu/index.js";
-  import { useDevice } from "../../../../hooks/responsive.svelte";
-  import type {
-    MenuProps,
-    NavigationMenuItemProps,
-    NavigationMenuItemListProps,
-    NavigationMenuItemCardProps,
-    NavigationMenuItemGridProps,
-    NavigationMenuItemsProps,
-  } from "./shared/types";
-  import NavigationMenuItemGrid from "./shared/NavigationMenuItemGrid.svelte";
-  import NavigationMenuItemCard from "./shared/NavigationMenuItemCard.svelte";
-  import NavigationMenuItem from "./shared/NavigationMenuItem.svelte";
-  import NavigationMenuItemList from "./shared/NavigationMenuItemList.svelte";
-  import NavigationMenuItems from "./shared/NavigationMenuItems.svelte";
-
-  const responsive = useDevice();
-
-  let { links }: MenuProps = $props();
-
-  type NavMenuItem =
-    | NavigationMenuItemCardProps
-    | NavigationMenuItemGridProps
-    | NavigationMenuItemListProps
-    | NavigationMenuItemsProps
-    | NavigationMenuItemProps;
-
-  function isCard(item: NavMenuItem): item is NavigationMenuItemCardProps {
-    return "header" in item && "cards" in item;
-  }
-
-  function isGrid(item: NavMenuItem): item is NavigationMenuItemGridProps {
-    return "grids" in item && "label" in item;
-  }
-
-  function isList(item: NavMenuItem): item is NavigationMenuItemListProps {
-    return "list" in item && "label" in item;
-  }
-
-  function isItems(item: NavMenuItem): item is NavigationMenuItemsProps {
-    return "items" in item && "label" in item;
-  }
-
-  function isItem(item: NavMenuItem): item is NavigationMenuItemProps {
-    return "href" in item && "label" in item;
-  }
-</script>
-
-<NavigationMenu.Root viewport={responsive.isMobile}>
-  <NavigationMenu.List class="flex-wrap">
-    {#each links as link, i (i)}
-      {#if isCard(link)}
-        <NavigationMenuItemCard {...link} />
-      {:else if isGrid(link)}
-        <NavigationMenuItemGrid {...link} />
-      {:else if isList(link)}
-        <NavigationMenuItemList {...link} />
-      {:else if isItems(link)}
-        <NavigationMenuItems {...link} />
-      {:else if isItem(link)}
-        <NavigationMenuItem {...link} />
-      {/if}
-    {/each}
-  </NavigationMenu.List>
-</NavigationMenu.Root>
+<script lang="ts">
+  import { LanguageSwitcher } from "../../../ui/language-switcher";
+  import { LightSwitch } from "../../../ui/light-switch";
+  import { useDevice } from "../../../../hooks/responsive.svelte";
+  import type { ComplexMenuProps, SimpleMenuProps } from "../../../../types";
+  import ComplexMenu from "./ComplexMenu.svelte";
+  import ComplexMenuMobile from "./mobile/ComplexMenuMobile.svelte";
+  import SimpleMenuMobile from "./mobile/SimpleMenuMobile.svelte";
+  import MenuButton from "./shared/MenuButton.svelte";
+  import MenuLogo from "./shared/MenuLogo.svelte";
+  import type { MenuProps, MenuVarientProps } from "../data/types";
+  import SimpleMenu from "./SimpleMenu.svelte";
+
+  let {
+    logo,
+    navMenu,
+    isBorder,
+    navMenuButton,
+    isLightSwitch,
+    isLanguageSwitcher,
+  }: MenuProps = $props();
+
+  function isLinks(item: MenuVarientProps): item is SimpleMenuProps {
+    return "links" in item;
+  }
+
+  function isMenu(item: MenuVarientProps): item is ComplexMenuProps {
+    return "menus" in item;
+  }
+
+  const responsive = useDevice();
+</script>
+
+{#snippet actionButtons()}
+  <div class="flex items-center gap-2">
+    {#if isLightSwitch}
+      <LightSwitch />
+    {/if}
+    {#if isLanguageSwitcher}
+      <LanguageSwitcher />
+    {/if}
+    {#if navMenuButton}
+      <MenuButton {...navMenuButton} />
+    {/if}
+  </div>
+{/snippet}
+
+<nav
+  class="flex items-center justify-between p-2 md:p-5 {isBorder
+    ? 'border-b-2'
+    : ''}"
+>
+  {#if logo}
+    <MenuLogo {...logo} />
+  {/if}
+
+  {#if responsive.isMobile}
+    {#if isLinks(navMenu)}
+      <SimpleMenuMobile {...navMenu} />
+    {:else if isMenu(navMenu)}
+      <ComplexMenuMobile {...navMenu} />
+    {/if}
+  {:else if isLinks(navMenu)}
+    <SimpleMenu {...navMenu} />
+    {@render actionButtons()}
+  {:else if isMenu(navMenu)}
+    <ComplexMenu {...navMenu} />
+    {@render actionButtons()}
+  {/if}
+</nav>

package/dist/components/core/nav/ui/Menu.svelte.d.ts

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { SimpleMenuProps } from "../data/nav-menu";
+  import MenuLinks from "./shared/MenuLinks.svelte";
+
+  let { ...restProps }: SimpleMenuProps = $props();
+</script>
+
+{#if restProps.align === "LINK_INTO_ACTIONS"}
+  <div class="flex items-center gap-2">
+    <MenuLinks {...restProps} orientation="vertical" />
+  </div>
+{:else}
+  <MenuLinks {...restProps} orientation="horizontal" />
+{/if}

package/dist/components/core/nav/ui/SimpleMenu.svelte.d.ts

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