negodesign 0.0.80 → 0.0.82

package/dist/components/ui/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 "../../../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 "../../../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/ui/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/ui/nav/ui/shared/MenuListItem.svelte

@@ -1,44 +1,44 @@
-<script lang="ts">
-  import { cn } from "../../../../../utils";
-  import type { ListItemProps } from "../../data/types";
-  let {
-    title,
-    content,
-    href,
-    icon,
-    textClass,
-    subTextClass,
-    class: className,
-    ...restProps
-  }: ListItemProps & {
-    textClass?: string;
-    subTextClass?: string;
-  } = $props();
-</script>
-
-<li>
-  <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">
-          <div class="leading-none font-medium">{title}</div>
-        </div>
-      </div>
-    {:else}
-      <div class="leading-none font-medium">{title}</div>
-    {/if}
-    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-      {content}
-    </p>
-  </a>
-</li>
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import type { ListItemProps } from "../../data/types";
+  let {
+    title,
+    content,
+    href,
+    icon,
+    textClass,
+    subTextClass,
+    class: className,
+    ...restProps
+  }: ListItemProps & {
+    textClass?: string;
+    subTextClass?: string;
+  } = $props();
+</script>
+
+<li>
+  <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">
+          <div class="leading-none font-medium">{title}</div>
+        </div>
+      </div>
+    {:else}
+      <div class="leading-none font-medium">{title}</div>
+    {/if}
+    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+      {content}
+    </p>
+  </a>
+</li>

package/dist/components/ui/nav/ui/shared/MenuLogo.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  import type { NavMenuLogoProps } from "../../../../../types";
-
-  let { img, url, label, className, onclick }: NavMenuLogoProps = $props();
-</script>
-
-<a href={url} {onclick}>
-  {#if img}
-    <img src={img} alt="logo of site" class={`max-h-50 ${className}`} />
-  {:else if label}
-    <span class={className}>{label}</span>
-  {/if}
-</a>
+<script lang="ts">
+  import type { NavMenuLogoProps } from "../../../../../types";
+
+  let { img, url, label, className, onclick }: NavMenuLogoProps = $props();
+</script>
+
+<a href={url} {onclick}>
+  {#if img}
+    <img src={img} alt="logo of site" class={`max-h-50 ${className}`} />
+  {:else if label}
+    <span class={className}>{label}</span>
+  {/if}
+</a>

package/dist/components/ui/nav/ui/shared/dropdown/DropdownNavigationMenuItemGrid.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-  import * as DropdownMenu from "../../../../dropdown-menu/index.js";
-  import type { NavigationMenuItemGridProps } from "../../../data/types";
-  import DropdownMenuListItem from "./DropdownMenuListItem.svelte";
-
-  let { label, grids: items }: NavigationMenuItemGridProps = $props();
-
-  const cols = (): string => {
-    const len = items?.length ?? 0;
-    if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
-    if (len > 5) return "md:grid-cols-3";
-    if (len % 3 == 0) return "md:grid-cols-3";
-    if (len % 2 == 0) return "md:grid-cols-2";
-    return "grid-cols-1";
-  };
-</script>
-
-<DropdownMenu.Sub>
-  <DropdownMenu.SubTrigger>{label}</DropdownMenu.SubTrigger>
-  {#if items}
-    {@const gridCols = cols()}
-    <DropdownMenu.SubContent>
-      <ul class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125  ${gridCols}`}>
-        {#each items as item, i (i)}
-          <DropdownMenuListItem {...item} />
-        {/each}
-      </ul>
-    </DropdownMenu.SubContent>
-  {/if}
-</DropdownMenu.Sub>
+<script lang="ts">
+  import * as DropdownMenu from "../../../../dropdown-menu/index.js";
+  import type { NavigationMenuItemGridProps } from "../../../data/types";
+  import DropdownMenuListItem from "./DropdownMenuListItem.svelte";
+
+  let { label, grids: items }: NavigationMenuItemGridProps = $props();
+
+  const cols = (): string => {
+    const len = items?.length ?? 0;
+    if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
+    if (len > 5) return "md:grid-cols-3";
+    if (len % 3 == 0) return "md:grid-cols-3";
+    if (len % 2 == 0) return "md:grid-cols-2";
+    return "grid-cols-1";
+  };
+</script>
+
+<DropdownMenu.Sub>
+  <DropdownMenu.SubTrigger>{label}</DropdownMenu.SubTrigger>
+  {#if items}
+    {@const gridCols = cols()}
+    <DropdownMenu.SubContent>
+      <ul class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125  ${gridCols}`}>
+        {#each items as item, i (i)}
+          <DropdownMenuListItem {...item} />
+        {/each}
+      </ul>
+    </DropdownMenu.SubContent>
+  {/if}
+</DropdownMenu.Sub>

package/dist/components/ui/nav/ui/shared/navigation/NavDropdown.svelte

@@ -1,88 +1,88 @@
-<script lang="ts">
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
-	import type { Snippet } from "svelte";
-
-	let {
-		label,
-		className = "",
-		hoverClass = "",
-		onClick,
-		children,
-	}: {
-		label: string;
-		className?: string;
-		hoverClass?: string;
-		children?: Snippet;
-		onClick?: () => void;
-	} = $props();
-
-	let open = $state(false);
-	let closeTimer: ReturnType<typeof setTimeout> | undefined;
-	let itemRef = $state<HTMLLIElement | null>(null);
-
-	function openMenu() {
-		clearTimeout(closeTimer);
-		open = true;
-	}
-
-	function scheduleClose() {
-		clearTimeout(closeTimer);
-		closeTimer = setTimeout(() => {
-			open = false;
-		}, 150);
-	}
-
-	$effect(() => {
-		function handleDocumentClick(event: MouseEvent) {
-			if (open && itemRef && !itemRef.contains(event.target as Node)) {
-				open = false;
-			}
-		}
-		document.addEventListener("click", handleDocumentClick);
-		return () => document.removeEventListener("click", handleDocumentClick);
-	});
-</script>
-
-<li
-	bind:this={itemRef}
-	class="relative {className}"
-	onmouseenter={openMenu}
-	onmouseleave={scheduleClose}
->
-	<button
-		type="button"
-		aria-expanded={open}
-		onclick={() => {
-			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:{hoverClass} focus:{hoverClass} focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 {open
-			? hoverClass
-			: ''}"
-	>
-		{label}
-		{#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 && children}
-		<div
-			style="z-index: 9999;"
-			class="absolute left-0 top-full 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"
-		>
-			{@render children()}
-		</div>
-	{/if}
-</li>
+<script lang="ts">
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
+	import type { Snippet } from "svelte";
+
+	let {
+		label,
+		className = "",
+		hoverClass = "",
+		onClick,
+		children,
+	}: {
+		label: string;
+		className?: string;
+		hoverClass?: string;
+		children?: Snippet;
+		onClick?: () => void;
+	} = $props();
+
+	let open = $state(false);
+	let closeTimer: ReturnType<typeof setTimeout> | undefined;
+	let itemRef = $state<HTMLLIElement | null>(null);
+
+	function openMenu() {
+		clearTimeout(closeTimer);
+		open = true;
+	}
+
+	function scheduleClose() {
+		clearTimeout(closeTimer);
+		closeTimer = setTimeout(() => {
+			open = false;
+		}, 150);
+	}
+
+	$effect(() => {
+		function handleDocumentClick(event: MouseEvent) {
+			if (open && itemRef && !itemRef.contains(event.target as Node)) {
+				open = false;
+			}
+		}
+		document.addEventListener("click", handleDocumentClick);
+		return () => document.removeEventListener("click", handleDocumentClick);
+	});
+</script>
+
+<li
+	bind:this={itemRef}
+	class="relative {className}"
+	onmouseenter={openMenu}
+	onmouseleave={scheduleClose}
+>
+	<button
+		type="button"
+		aria-expanded={open}
+		onclick={() => {
+			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:{hoverClass} focus:{hoverClass} focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 {open
+			? hoverClass
+			: ''}"
+	>
+		{label}
+		{#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 && children}
+		<div
+			style="z-index: 9999;"
+			class="absolute left-0 top-full 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"
+		>
+			{@render children()}
+		</div>
+	{/if}
+</li>

package/dist/components/ui/nav/ui/shared/navigation/NavigationMenuItem.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import type { NavigationMenuItemProps } from "../../../data/types";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let { label, href, textClass, hoverClass }: NavigationMenuItemProps =
-    $props();
-</script>
-
-<NavDropdown
-  {label}
-  className="hidden md:block"
-  {hoverClass}
-  onClick={() => {
-    if (href) goto(href);
-  }}
-/>
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import type { NavigationMenuItemProps } from "../../../data/types";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let { label, href, textClass, hoverClass }: NavigationMenuItemProps =
+    $props();
+</script>
+
+<NavDropdown
+  {label}
+  className="hidden md:block"
+  {hoverClass}
+  onClick={() => {
+    if (href) goto(href);
+  }}
+/>