negodesign 0.0.80 → 0.0.82

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

@@ -1,51 +1,51 @@
-<script lang="ts">
-  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, textClass, subTextClass, hoverClass }: ComplexMenuProps =
-    $props();
-</script>
-
-<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}
-        {textClass}
-        {subTextClass}
-        {hoverClass}
-      />
-    {:else if isGrid(link)}
-      <NavigationMenuItemGrid
-        {...link}
-        {textClass}
-        {subTextClass}
-        {hoverClass}
-      />
-    {:else if isList(link)}
-      <NavigationMenuItemList
-        {...link}
-        {textClass}
-        {subTextClass}
-        {hoverClass}
-      />
-    {:else if isItems(link)}
-      <NavigationMenuItems {...link} {textClass} {hoverClass} />
-    {:else if isItem(link)}
-      <NavigationMenuItem {...link} {textClass} {hoverClass} />
-    {/if}
-  {/each}
-</ul>
+<script lang="ts">
+  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, textClass, subTextClass, hoverClass }: ComplexMenuProps =
+    $props();
+</script>
+
+<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}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
+    {:else if isGrid(link)}
+      <NavigationMenuItemGrid
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
+    {:else if isList(link)}
+      <NavigationMenuItemList
+        {...link}
+        {textClass}
+        {subTextClass}
+        {hoverClass}
+      />
+    {:else if isItems(link)}
+      <NavigationMenuItems {...link} {textClass} {hoverClass} />
+    {:else if isItem(link)}
+      <NavigationMenuItem {...link} {textClass} {hoverClass} />
+    {/if}
+  {/each}
+</ul>

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

@@ -1,72 +1,72 @@
-<script lang="ts">
-  import { LanguageSwitcher } from "../../language-switcher";
-  import { LightSwitch } from "../../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 & {
-    navMenu: MenuVarientProps;
-  } = $props();
-
-  function isLinks(item: MenuVarientProps | undefined): item is SimpleMenuProps {
-    return item !== undefined && "links" in item;
-  }
-
-  function isMenu(item: MenuVarientProps | undefined): item is ComplexMenuProps {
-    return item !== undefined && "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 w-full {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>
+<script lang="ts">
+  import { LanguageSwitcher } from "../../language-switcher";
+  import { LightSwitch } from "../../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 & {
+    navMenu: MenuVarientProps;
+  } = $props();
+
+  function isLinks(item: MenuVarientProps | undefined): item is SimpleMenuProps {
+    return item !== undefined && "links" in item;
+  }
+
+  function isMenu(item: MenuVarientProps | undefined): item is ComplexMenuProps {
+    return item !== undefined && "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 w-full {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/ui/nav/ui/SimpleMenu.svelte

@@ -1,14 +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 w-full">
-    <MenuLinks {...restProps} orientation="vertical" />
-  </div>
-{:else}
-  <MenuLinks {...restProps} orientation="horizontal" />
-{/if}
+<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 w-full">
+    <MenuLinks {...restProps} orientation="vertical" />
+  </div>
+{:else}
+  <MenuLinks {...restProps} orientation="horizontal" />
+{/if}

package/dist/components/ui/nav/ui/mobile/ComplexMenuMobile.svelte

@@ -1,125 +1,125 @@
-<script lang="ts">
-  import type {
-    ComplexMenuProps,
-    NavigationMenuItemCardProps,
-    NavigationMenuItemGridProps,
-    NavigationMenuItemListProps,
-    NavigationMenuItemsProps,
-    NavigationMenuItemProps,
-  } from "../../data/types";
-  import {
-    isCard,
-    isGrid,
-    isList,
-    isItems,
-    isItem,
-  } from "../../data/complex-menu-utils";
-  import CollapsibleNavMenu from "../shared/CollapsibleNavMenu.svelte";
-  import NavMenuItem from "../shared/NavMenuItem.svelte";
-  import MenuMobile from "./MenuMobile.svelte";
-
-  let { menus: links }: ComplexMenuProps = $props();
-</script>
-
-{#snippet headerSnippet(
-  header: NonNullable<NavigationMenuItemCardProps["header"]>,
-)}
-  <div class="mt-4 mb-2 text-lg font-medium {header.labelClass}">
-    {header.label}
-  </div>
-  <p
-    class="text-sm leading-tight {header.descriptionClass ||
-      'text-muted-foreground'}"
-  >
-    {header.description}
-  </p>
-{/snippet}
-
-<MenuMobile>
-  <div class="flex flex-col gap-1">
-    {#each links as link, i (i)}
-      {#if isCard(link)}
-        {@const card = link as NavigationMenuItemCardProps}
-        <CollapsibleNavMenu label={card.label ?? card.header?.label ?? ""}>
-          <ul class="grid gap-2 p-2">
-            {#if card.header}
-              <li
-                class="relative row-span-3"
-                style={card.header.imgUrl
-                  ? `background-image: url(${card.header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
-                  : ""}
-              >
-                <a
-                  href={card.header.href ?? "#"}
-                  class="flex h-full w-full flex-col justify-end p-4 {card
-                    .header.imgUrl
-                    ? 'no-underline outline-hidden select-none'
-                    : 'bg-linear-to-b from-muted/50 to-muted rounded-md'}"
-                >
-                  {@render headerSnippet(card.header)}
-                </a>
-              </li>
-            {/if}
-            {#if card.cards}
-              {#each card.cards as item, j (j)}
-                <NavMenuItem {...item} />
-              {/each}
-            {/if}
-          </ul>
-        </CollapsibleNavMenu>
-      {:else if isGrid(link)}
-        {@const grid = link as NavigationMenuItemGridProps}
-        <CollapsibleNavMenu label={grid.label}>
-          <ul class="grid grid-cols-2 gap-2 max-h-37.5 overflow-y-auto p-2">
-            {#each grid.grids ?? [] as item, j (j)}
-              <NavMenuItem {...item} />
-            {/each}
-          </ul>
-        </CollapsibleNavMenu>
-      {:else if isList(link)}
-        {@const list = link as NavigationMenuItemListProps}
-        <CollapsibleNavMenu label={list.label}>
-          <ul class="grid gap-4 p-2">
-            {#each list.list ?? [] as item, j (j)}
-              <li>
-                <a
-                  href={item.href}
-                  class="block rounded-md p-2 no-underline hover:bg-accent"
-                >
-                  <div class="font-medium">{item.title ?? ""}</div>
-                  <div class="text-sm text-muted-foreground">
-                    {item.content}
-                  </div>
-                </a>
-              </li>
-            {/each}
-          </ul>
-        </CollapsibleNavMenu>
-      {:else if isItems(link)}
-        {@const items = link as NavigationMenuItemsProps}
-        <CollapsibleNavMenu label={items.label}>
-          <ul class="grid min-w-50 gap-4 p-2">
-            {#each items.items ?? [] as item, j (j)}
-              <li>
-                <a
-                  href={item.href}
-                  class="block rounded-md px-3 py-2 text-sm font-medium no-underline hover:bg-accent"
-                >
-                  {item.title}
-                </a>
-              </li>
-            {/each}
-          </ul>
-        </CollapsibleNavMenu>
-      {:else if isItem(link)}
-        {@const item = link as NavigationMenuItemProps}
-        <a
-          href={item.href}
-          class="block w-full rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-accent focus:bg-accent"
-        >
-          {item.label}
-        </a>
-      {/if}
-    {/each}
-  </div>
-</MenuMobile>
+<script lang="ts">
+  import type {
+    ComplexMenuProps,
+    NavigationMenuItemCardProps,
+    NavigationMenuItemGridProps,
+    NavigationMenuItemListProps,
+    NavigationMenuItemsProps,
+    NavigationMenuItemProps,
+  } from "../../data/types";
+  import {
+    isCard,
+    isGrid,
+    isList,
+    isItems,
+    isItem,
+  } from "../../data/complex-menu-utils";
+  import CollapsibleNavMenu from "../shared/CollapsibleNavMenu.svelte";
+  import NavMenuItem from "../shared/NavMenuItem.svelte";
+  import MenuMobile from "./MenuMobile.svelte";
+
+  let { menus: links }: ComplexMenuProps = $props();
+</script>
+
+{#snippet headerSnippet(
+  header: NonNullable<NavigationMenuItemCardProps["header"]>,
+)}
+  <div class="mt-4 mb-2 text-lg font-medium {header.labelClass}">
+    {header.label}
+  </div>
+  <p
+    class="text-sm leading-tight {header.descriptionClass ||
+      'text-muted-foreground'}"
+  >
+    {header.description}
+  </p>
+{/snippet}
+
+<MenuMobile>
+  <div class="flex flex-col gap-1">
+    {#each links as link, i (i)}
+      {#if isCard(link)}
+        {@const card = link as NavigationMenuItemCardProps}
+        <CollapsibleNavMenu label={card.label ?? card.header?.label ?? ""}>
+          <ul class="grid gap-2 p-2">
+            {#if card.header}
+              <li
+                class="relative row-span-3"
+                style={card.header.imgUrl
+                  ? `background-image: url(${card.header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
+                  : ""}
+              >
+                <a
+                  href={card.header.href ?? "#"}
+                  class="flex h-full w-full flex-col justify-end p-4 {card
+                    .header.imgUrl
+                    ? 'no-underline outline-hidden select-none'
+                    : 'bg-linear-to-b from-muted/50 to-muted rounded-md'}"
+                >
+                  {@render headerSnippet(card.header)}
+                </a>
+              </li>
+            {/if}
+            {#if card.cards}
+              {#each card.cards as item, j (j)}
+                <NavMenuItem {...item} />
+              {/each}
+            {/if}
+          </ul>
+        </CollapsibleNavMenu>
+      {:else if isGrid(link)}
+        {@const grid = link as NavigationMenuItemGridProps}
+        <CollapsibleNavMenu label={grid.label}>
+          <ul class="grid grid-cols-2 gap-2 max-h-37.5 overflow-y-auto p-2">
+            {#each grid.grids ?? [] as item, j (j)}
+              <NavMenuItem {...item} />
+            {/each}
+          </ul>
+        </CollapsibleNavMenu>
+      {:else if isList(link)}
+        {@const list = link as NavigationMenuItemListProps}
+        <CollapsibleNavMenu label={list.label}>
+          <ul class="grid gap-4 p-2">
+            {#each list.list ?? [] as item, j (j)}
+              <li>
+                <a
+                  href={item.href}
+                  class="block rounded-md p-2 no-underline hover:bg-accent"
+                >
+                  <div class="font-medium">{item.title ?? ""}</div>
+                  <div class="text-sm text-muted-foreground">
+                    {item.content}
+                  </div>
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </CollapsibleNavMenu>
+      {:else if isItems(link)}
+        {@const items = link as NavigationMenuItemsProps}
+        <CollapsibleNavMenu label={items.label}>
+          <ul class="grid min-w-50 gap-4 p-2">
+            {#each items.items ?? [] as item, j (j)}
+              <li>
+                <a
+                  href={item.href}
+                  class="block rounded-md px-3 py-2 text-sm font-medium no-underline hover:bg-accent"
+                >
+                  {item.title}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </CollapsibleNavMenu>
+      {:else if isItem(link)}
+        {@const item = link as NavigationMenuItemProps}
+        <a
+          href={item.href}
+          class="block w-full rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-accent focus:bg-accent"
+        >
+          {item.label}
+        </a>
+      {/if}
+    {/each}
+  </div>
+</MenuMobile>

package/dist/components/ui/nav/ui/mobile/MenuMobile.svelte

@@ -1,54 +1,54 @@
-<script lang="ts">
-  import * as Drawer from "../../../drawer/index.js";
-  import type { NavMenuButtonProps } from "../../data/nav-menu";
-  import { buttonVariants } from "../../../button/index.js";
-  import { cn } from "../../../../../utils.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { Menu } from "@hugeicons/core-free-icons";
-  import LightSwitch from "../../../light-switch/light-switch.svelte";
-  import LanguageSwitcher from "../../../language-switcher/language-switcher.svelte";
-  import { t } from "../../../../../i18n";
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    navMenuButton?: NavMenuButtonProps;
-    isLightSwitch?: boolean;
-    isLanguageSwitcher?: boolean;
-    children: Snippet;
-  };
-
-  const { navMenuButton, isLightSwitch, isLanguageSwitcher, children }: Props =
-    $props();
-</script>
-
-<div class="flex flex-wrap gap-2">
-  <Drawer.Root direction="right">
-    <Drawer.Trigger
-      class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
-    >
-      <HugeiconsIcon icon={Menu} />
-    </Drawer.Trigger>
-    <Drawer.Content
-      class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
-    >
-      <Drawer.Header>
-        <Drawer.Title>{$t("label.menu")}</Drawer.Title>
-        <Drawer.Description>
-          {$t("label.navigation.text")}
-        </Drawer.Description>
-      </Drawer.Header>
-      <div class="no-scrollbar overflow-y-auto px-4">
-        {@render children()}
-      </div>
-      <Drawer.Footer>
-        <div class="flex justify-center gap-5 py-5">
-          <LightSwitch />
-          <LanguageSwitcher />
-        </div>
-        <Drawer.Close class={buttonVariants({ variant: "outline" })}>
-          {$t("label.close")}
-        </Drawer.Close>
-      </Drawer.Footer>
-    </Drawer.Content>
-  </Drawer.Root>
-</div>
+<script lang="ts">
+  import * as Drawer from "../../../drawer/index.js";
+  import type { NavMenuButtonProps } from "../../data/nav-menu";
+  import { buttonVariants } from "../../../button/index.js";
+  import { cn } from "../../../../../utils.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Menu } from "@hugeicons/core-free-icons";
+  import LightSwitch from "../../../light-switch/light-switch.svelte";
+  import LanguageSwitcher from "../../../language-switcher/language-switcher.svelte";
+  import { t } from "../../../../../i18n";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    navMenuButton?: NavMenuButtonProps;
+    isLightSwitch?: boolean;
+    isLanguageSwitcher?: boolean;
+    children: Snippet;
+  };
+
+  const { navMenuButton, isLightSwitch, isLanguageSwitcher, children }: Props =
+    $props();
+</script>
+
+<div class="flex flex-wrap gap-2">
+  <Drawer.Root direction="right">
+    <Drawer.Trigger
+      class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
+    >
+      <HugeiconsIcon icon={Menu} />
+    </Drawer.Trigger>
+    <Drawer.Content
+      class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
+    >
+      <Drawer.Header>
+        <Drawer.Title>{$t("label.menu")}</Drawer.Title>
+        <Drawer.Description>
+          {$t("label.navigation.text")}
+        </Drawer.Description>
+      </Drawer.Header>
+      <div class="no-scrollbar overflow-y-auto px-4">
+        {@render children()}
+      </div>
+      <Drawer.Footer>
+        <div class="flex justify-center gap-5 py-5">
+          <LightSwitch />
+          <LanguageSwitcher />
+        </div>
+        <Drawer.Close class={buttonVariants({ variant: "outline" })}>
+          {$t("label.close")}
+        </Drawer.Close>
+      </Drawer.Footer>
+    </Drawer.Content>
+  </Drawer.Root>
+</div>