negodesign 0.0.59 → 0.0.60

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/ui/ComplexMenu.svelte

@@ -1,36 +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>
+<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/Menu.svelte

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

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

@@ -1,54 +1,54 @@
-<script lang="ts">
-  import * as Drawer from "../../../../ui/drawer/index.js";
-  import type { NavMenuButtonProps } from "../../data/nav-menu";
-  import { buttonVariants } from "../../../../ui/button/index.js";
-  import { cn } from "../../../../../utils.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { Menu } from "@hugeicons/core-free-icons";
-  import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
-  import LanguageSwitcher from "../../../../ui/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 "../../../../ui/drawer/index.js";
+  import type { NavMenuButtonProps } from "../../data/nav-menu";
+  import { buttonVariants } from "../../../../ui/button/index.js";
+  import { cn } from "../../../../../utils.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Menu } from "@hugeicons/core-free-icons";
+  import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
+  import LanguageSwitcher from "../../../../ui/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>

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

@@ -1,51 +1,51 @@
-<script lang="ts">
-  import type { NavMenuButtonProps } from "../../data/nav-menu";
-  import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
-  import { Button } from "../../../../ui/button/index.js";
-  import { t } from "../../../../../i18n";
-
-  let {
-    buttonClass,
-    textButtonLogin,
-    textButtonRegister,
-    onclickButtonLogin,
-    onclickButtonRegister,
-  }: NavMenuButtonProps = $props();
-</script>
-
-{#if onclickButtonRegister}
-  {@render actionButtons({
-    text: textButtonRegister || $t("label.register"),
-    icon: User03Icon,
-    onclick: onclickButtonRegister,
-  })}
-{/if}
-{#if onclickButtonLogin}
-  {@render actionButtons({
-    text: textButtonLogin || $t("label.login"),
-    icon: Login03Icon,
-    onclick: onclickButtonLogin,
-  })}
-{/if}
-
-{#snippet actionButtons({
-  text,
-  icon,
-  onclick,
-}: Readonly<{
-  text: string;
-  icon: IconSvgElement;
-  onclick: () => void;
-}>)}
-  <Button
-    {onclick}
-    variant="outline"
-    class="flex justify-between items-center gap-3 rounded-full border p-5 md:p-5 cursor-pointer md:text-md"
-  >
-    <div>{text}</div>
-    <div class="border p-2 rounded-full bg-white dark:bg-background mr-0">
-      <HugeiconsIcon {icon} />
-    </div>
-  </Button>
-{/snippet}
+<script lang="ts">
+  import type { NavMenuButtonProps } from "../../data/nav-menu";
+  import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+  import { Button } from "../../../../ui/button/index.js";
+  import { t } from "../../../../../i18n";
+
+  let {
+    buttonClass,
+    textButtonLogin,
+    textButtonRegister,
+    onclickButtonLogin,
+    onclickButtonRegister,
+  }: NavMenuButtonProps = $props();
+</script>
+
+{#if onclickButtonRegister}
+  {@render actionButtons({
+    text: textButtonRegister || $t("label.register"),
+    icon: User03Icon,
+    onclick: onclickButtonRegister,
+  })}
+{/if}
+{#if onclickButtonLogin}
+  {@render actionButtons({
+    text: textButtonLogin || $t("label.login"),
+    icon: Login03Icon,
+    onclick: onclickButtonLogin,
+  })}
+{/if}
+
+{#snippet actionButtons({
+  text,
+  icon,
+  onclick,
+}: Readonly<{
+  text: string;
+  icon: IconSvgElement;
+  onclick: () => void;
+}>)}
+  <Button
+    {onclick}
+    variant="outline"
+    class="flex justify-between items-center gap-3 rounded-full border p-5 md:p-5 cursor-pointer md:text-md"
+  >
+    <div>{text}</div>
+    <div class="border p-2 rounded-full bg-white dark:bg-background mr-0">
+      <HugeiconsIcon {icon} />
+    </div>
+  </Button>
+{/snippet}

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

@@ -1,40 +1,40 @@
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type { NavMenuLinksProps } from "../../data/nav-menu";
-
-  type Props = {
-    links: NavMenuLinksProps[];
-    linkClass?: string;
-    groupClass?: string;
-    menuKey?: string;
-    activeClass?: string;
-    orientation?: "horizontal" | "vertical";
-  };
-
-  let {
-    links,
-    linkClass,
-    groupClass,
-    menuKey,
-    activeClass = "bg-gradient text-white",
-    orientation,
-  }: Props = $props();
-</script>
-
-<ul
-  class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"}  gap-2 md:gap-5 lg:gap-15 ${groupClass}`}
->
-  {#each links as item (item.label)}
-    <li>
-      <a
-        class={`flex items-center gap-1 ${linkClass} ${item.key && menuKey === item.key ? activeClass : ""}`}
-        href={item.url ?? item.href ?? "#"}
-      >
-        {#if item.icon}
-          <HugeiconsIcon icon={item.icon} size={15} />
-        {/if}
-        {item.label}
-      </a>
-    </li>
-  {/each}
-</ul>
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { NavMenuLinksProps } from "../../data/nav-menu";
+
+  type Props = {
+    links: NavMenuLinksProps[];
+    linkClass?: string;
+    groupClass?: string;
+    menuKey?: string;
+    activeClass?: string;
+    orientation?: "horizontal" | "vertical";
+  };
+
+  let {
+    links,
+    linkClass,
+    groupClass,
+    menuKey,
+    activeClass = "bg-gradient text-white",
+    orientation,
+  }: Props = $props();
+</script>
+
+<ul
+  class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"}  gap-2 md:gap-5 lg:gap-15 ${groupClass}`}
+>
+  {#each links as item (item.label)}
+    <li>
+      <a
+        class={`flex items-center gap-1 ${linkClass} ${item.key && menuKey === item.key ? activeClass : ""}`}
+        href={item.url ?? item.href ?? "#"}
+      >
+        {#if item.icon}
+          <HugeiconsIcon icon={item.icon} size={15} />
+        {/if}
+        {item.label}
+      </a>
+    </li>
+  {/each}
+</ul>

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

@@ -1,48 +1,48 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
-  import { cn } from "../../../../../utils";
-  import type { ListItemProps } from "../../data/types";
-  let {
-    title,
-    content,
-    href,
-    icon,
-    class: className,
-    ...restProps
-  }: ListItemProps = $props();
-</script>
-
-{#snippet header()}
-  <div class="leading-none font-medium">{title}</div>
-{/snippet}
-
-<li>
-  <NavigationMenu.Link>
-    {#snippet child()}
-      <a
-        {href}
-        class={cn(
-          "block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-          className,
-        )}
-        {...restProps}
-      >
-        {#if icon}
-          <div class="flex gap-1 items-center">
-            <div>
-              <i class={`${icon} size-8 md:size-10`}></i>
-            </div>
-            <div class="-mt-1">
-              {@render header()}
-            </div>
-          </div>
-        {:else}
-          {@render header()}
-        {/if}
-        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-          {content}
-        </p>
-      </a>
-    {/snippet}
-  </NavigationMenu.Link>
-</li>
+<script lang="ts">
+  import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
+  import { cn } from "../../../../../utils";
+  import type { ListItemProps } from "../../data/types";
+  let {
+    title,
+    content,
+    href,
+    icon,
+    class: className,
+    ...restProps
+  }: ListItemProps = $props();
+</script>
+
+{#snippet header()}
+  <div class="leading-none font-medium">{title}</div>
+{/snippet}
+
+<li>
+  <NavigationMenu.Link>
+    {#snippet child()}
+      <a
+        {href}
+        class={cn(
+          "block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+          className,
+        )}
+        {...restProps}
+      >
+        {#if icon}
+          <div class="flex gap-1 items-center">
+            <div>
+              <i class={`${icon} size-8 md:size-10`}></i>
+            </div>
+            <div class="-mt-1">
+              {@render header()}
+            </div>
+          </div>
+        {:else}
+          {@render header()}
+        {/if}
+        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+          {content}
+        </p>
+      </a>
+    {/snippet}
+  </NavigationMenu.Link>
+</li>