negodesign 0.0.55 → 0.0.57

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

@@ -0,0 +1,98 @@
+<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 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/core/nav/ui/mobile/ComplexMenuMobile.svelte.d.ts

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

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

@@ -0,0 +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>

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

@@ -0,0 +1,11 @@
+import type { NavMenuButtonProps } from "../../data/nav-menu";
+import type { Snippet } from "svelte";
+type Props = {
+    navMenuButton?: NavMenuButtonProps;
+    isLightSwitch?: boolean;
+    isLanguageSwitcher?: boolean;
+    children: Snippet;
+};
+declare const MenuMobile: import("svelte").Component<Props, {}, "">;
+type MenuMobile = ReturnType<typeof MenuMobile>;
+export default MenuMobile;

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Button } from "../../../../ui/button/index.js";
+  import type { NavMenuLinksProps } from "../../data/nav-menu";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
+  import MenuLinks from "../shared/MenuLinks.svelte";
+  import MenuMobile from "./MenuMobile.svelte";
+  import { t } from "../../../../../i18n";
+
+  type Props = {
+    links: NavMenuLinksProps[];
+    onclickButtonLogin?: () => void;
+    onclickButtonRegister?: () => void;
+  };
+
+  const { links, onclickButtonLogin, onclickButtonRegister }: Props = $props();
+</script>
+
+<MenuMobile>
+  <nav>
+    <div class="mt-5 mb-4 font-semibold">{$t("label.navigation")}</div>
+    <MenuLinks {links} groupClass="space-y-3" orientation="vertical" />
+  </nav>
+
+  <div class="mt-5">
+    <div class="mt-5 mb-4 font-semibold">{$t("label.action")}</div>
+    <section>
+      {#if onclickButtonRegister}
+        <Button variant="outline" onclick={onclickButtonRegister}>
+          <HugeiconsIcon icon={User03Icon} />
+          {$t("label.register")}
+        </Button>
+      {/if}
+      {#if onclickButtonLogin}
+        <Button variant="outline" onclick={onclickButtonLogin}>
+          <HugeiconsIcon icon={Login03Icon} />
+          {$t("label.login")}
+        </Button>
+      {/if}
+    </section>
+  </div>
+</MenuMobile>

package/dist/components/core/nav/ui/mobile/{nav-menu-drawer.svelte.d.ts → SimpleMenuMobile.svelte.d.ts}

@@ -4,6 +4,6 @@ type Props = {
     onclickButtonLogin?: () => void;
     onclickButtonRegister?: () => void;
 };
-declare const NavMenuDrawer: import("svelte").Component<Props, {}, "">;
-type NavMenuDrawer = ReturnType<typeof NavMenuDrawer>;
-export default NavMenuDrawer;
+declare const SimpleMenuMobile: import("svelte").Component<Props, {}, "">;
+type SimpleMenuMobile = ReturnType<typeof SimpleMenuMobile>;
+export default SimpleMenuMobile;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import * as Collapsible from "../../../../ui/collapsible/index.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+
+  let { label, children }: { label: string; children: Snippet } = $props();
+</script>
+
+<Collapsible.Root>
+  <Collapsible.Trigger
+    class="group flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium outline-hidden select-none hover:bg-accent focus:bg-accent data-[state=open]:bg-accent"
+  >
+    {label}
+    <HugeiconsIcon
+      icon={ArrowDown01Icon}
+      strokeWidth={2}
+      class="ml-auto size-4 transition-transform duration-200 group-data-[state=open]:rotate-180"
+    />
+  </Collapsible.Trigger>
+  <Collapsible.Content class="overflow-hidden">
+    {@render children()}
+  </Collapsible.Content>
+</Collapsible.Root>

package/dist/components/core/nav/ui/shared/CollapsibleNavMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    label: string;
+    children: Snippet;
+};
+declare const CollapsibleNavMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type CollapsibleNavMenu = ReturnType<typeof CollapsibleNavMenu>;
+export default CollapsibleNavMenu;

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

@@ -0,0 +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}

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

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

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 "./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>

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

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

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

@@ -0,0 +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>

package/dist/components/core/nav/ui/shared/MenuLogo.svelte.d.ts

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

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { ListItemProps } from "../../data/types";
+
+  let { title, content, href, icon }: ListItemProps = $props();
+</script>
+
+<li>
+  <a
+    {href}
+    class="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"
+  >
+    {#if icon}
+      <div class="flex items-center gap-1">
+        <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/core/nav/ui/shared/NavMenuItem.svelte.d.ts

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

package/dist/components/core/nav/ui/shared/dropdown/DropdownMenuListItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { cn } from "../../../../../../utils";
+  import type { ListItemProps } from "../../../data/types";
+
+  let {
+    title,
+    content,
+    href,
+    icon,
+    class: className,
+    ...restProps
+  }: ListItemProps = $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/core/nav/ui/shared/dropdown/DropdownMenuListItem.svelte.d.ts

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

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItem.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import * as DropdownMenu from "../../../../../ui/dropdown-menu/index.js";
+  import type { NavigationMenuItemProps } from "../../../data/types";
+
+  let { label, href }: NavigationMenuItemProps = $props();
+</script>
+
+<DropdownMenu.Item>
+  <a {href} class="block w-full px-3 py-2 text-sm font-medium">
+    {label}
+  </a>
+</DropdownMenu.Item>

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItem.svelte.d.ts

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