negodesign 0.0.72 → 0.0.74

package/dist/components/{core → ui}/nav/ui/shared/navigation/NavDropdown.svelte

@@ -1,87 +1,87 @@
-<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
-			class="absolute left-0 top-full z-50 md:z-100 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
+			class="absolute left-0 top-full z-50 md:z-100 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/{core → 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);
+  }}
+/>

package/dist/components/{core → ui}/nav/ui/shared/navigation/NavigationMenuItemCard.svelte

@@ -1,53 +1,53 @@
-<script lang="ts">
-  import type { NavigationMenuItemCardProps } from "../../../data/types";
-  import MenuListItem from "../MenuListItem.svelte";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let {
-    label,
-    header,
-    cards: items,
-    hoverClass,
-  }: NavigationMenuItemCardProps = $props();
-</script>
-
-{#snippet headerSnippet(label: string, description: string)}
-  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">
-    {label}
-  </div>
-  <p
-    class="text-sm leading-tight {header?.descriptionClass ||
-      'text-muted-foreground'}"
-  >
-    {description}
-  </p>
-{/snippet}
-
-<NavDropdown label={label ?? header?.label ?? ""} {hoverClass}>
-  <ul class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
-    {#if header}
-      <li
-        class="row-span-3 relative"
-        style={header.imgUrl
-          ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
-          : ``}
-      >
-        <a
-          href={header.href ?? "#"}
-          class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
-            header.imgUrl
-              ? `no-underline outline-hidden select-none`
-              : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
-          }`}
-        >
-          {@render headerSnippet(header.label, header.description)}
-        </a>
-      </li>
-    {/if}
-    {#if items && items.length > 0}
-      {#each items as item, i (i)}
-        <MenuListItem {...item} />
-      {/each}
-    {/if}
-  </ul>
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemCardProps } from "../../../data/types";
+  import MenuListItem from "../MenuListItem.svelte";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let {
+    label,
+    header,
+    cards: items,
+    hoverClass,
+  }: NavigationMenuItemCardProps = $props();
+</script>
+
+{#snippet headerSnippet(label: string, description: string)}
+  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">
+    {label}
+  </div>
+  <p
+    class="text-sm leading-tight {header?.descriptionClass ||
+      'text-muted-foreground'}"
+  >
+    {description}
+  </p>
+{/snippet}
+
+<NavDropdown label={label ?? header?.label ?? ""} {hoverClass}>
+  <ul class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
+    {#if header}
+      <li
+        class="row-span-3 relative"
+        style={header.imgUrl
+          ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
+          : ``}
+      >
+        <a
+          href={header.href ?? "#"}
+          class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
+            header.imgUrl
+              ? `no-underline outline-hidden select-none`
+              : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
+          }`}
+        >
+          {@render headerSnippet(header.label, header.description)}
+        </a>
+      </li>
+    {/if}
+    {#if items && items.length > 0}
+      {#each items as item, i (i)}
+        <MenuListItem {...item} />
+      {/each}
+    {/if}
+  </ul>
+</NavDropdown>

package/dist/components/{core → ui}/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-  import type { NavigationMenuItemGridProps } from "../../../data/types";
-  import MenuListItem from "../MenuListItem.svelte";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let {
-    label,
-    grids: items,
-    textClass,
-    subTextClass,
-    hoverClass,
-  }: 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";
-  };
-
-  const gridCols = $derived(cols());
-</script>
-
-<NavDropdown {label} {hoverClass}>
-  {#if items}
-    <ul
-      class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 max-h-75 overflow-y-auto ${gridCols}`}
-    >
-      {#each items as item, i (i)}
-        <MenuListItem {...item} {textClass} {subTextClass} />
-      {/each}
-    </ul>
-  {/if}
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemGridProps } from "../../../data/types";
+  import MenuListItem from "../MenuListItem.svelte";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let {
+    label,
+    grids: items,
+    textClass,
+    subTextClass,
+    hoverClass,
+  }: 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";
+  };
+
+  const gridCols = $derived(cols());
+</script>
+
+<NavDropdown {label} {hoverClass}>
+  {#if items}
+    <ul
+      class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 max-h-75 overflow-y-auto ${gridCols}`}
+    >
+      {#each items as item, i (i)}
+        <MenuListItem {...item} {textClass} {subTextClass} />
+      {/each}
+    </ul>
+  {/if}
+</NavDropdown>

package/dist/components/{core → ui}/nav/ui/shared/navigation/NavigationMenuItemList.svelte

@@ -1,24 +1,24 @@
-<script lang="ts">
-  import type { NavigationMenuItemListProps } from "../../../data/types";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let { label, list, hoverClass }: NavigationMenuItemListProps = $props();
-</script>
-
-<NavDropdown {label} className="hidden md:block" {hoverClass}>
-  <ul class="grid w-75 gap-4 p-2">
-    {#each list as item, i (i)}
-      <li>
-        <a
-          href={item.href}
-          class="block rounded-xl p-2 no-underline hover:bg-muted"
-        >
-          <div class="font-medium">{item.title ?? ""}</div>
-          <div class="text-muted-foreground">
-            {item.content}
-          </div>
-        </a>
-      </li>
-    {/each}
-  </ul>
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemListProps } from "../../../data/types";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let { label, list, hoverClass }: NavigationMenuItemListProps = $props();
+</script>
+
+<NavDropdown {label} className="hidden md:block" {hoverClass}>
+  <ul class="grid w-75 gap-4 p-2">
+    {#each list as item, i (i)}
+      <li>
+        <a
+          href={item.href}
+          class="block rounded-xl p-2 no-underline hover:bg-muted"
+        >
+          <div class="font-medium">{item.title ?? ""}</div>
+          <div class="text-muted-foreground">
+            {item.content}
+          </div>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</NavDropdown>

package/dist/components/{core → ui}/nav/ui/shared/navigation/NavigationMenuItems.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-  import type { NavigationMenuItemsProps } from "../../../data/types";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let { label, items, hoverClass }: NavigationMenuItemsProps = $props();
-</script>
-
-<NavDropdown {label} className="hidden md:block" {hoverClass}>
-  <ul class="grid min-w-50 gap-4 p-1 md:p-2">
-    {#each items as item, i (i)}
-      <li>
-        <a
-          href={item.href}
-          class="block rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-muted focus:bg-muted"
-        >
-          {item.title}
-        </a>
-      </li>
-    {/each}
-  </ul>
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemsProps } from "../../../data/types";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let { label, items, hoverClass }: NavigationMenuItemsProps = $props();
+</script>
+
+<NavDropdown {label} className="hidden md:block" {hoverClass}>
+  <ul class="grid min-w-50 gap-4 p-1 md:p-2">
+    {#each items as item, i (i)}
+      <li>
+        <a
+          href={item.href}
+          class="block rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-muted focus:bg-muted"
+        >
+          {item.title}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</NavDropdown>

package/dist/components/{core → ui}/panel/CarouselSlot.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import * as Carousel from "../../ui/carousel/index.js";
-  import { useDevice } from "../../../hooks/responsive.svelte";
-  import type { CarouselSlotProps } from "./type";
-
-  const {
-    positionButtonPreviousAndNext = "center",
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-    isBorderBottom = false,
-    containerClass = "w-full",
-    plugins = [],
-    children,
-  }: CarouselSlotProps = $props();
-
-  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
-  const styleCenter =
-    "absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
-
-  const responsive = useDevice();
-</script>
-
-<div
-  class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
->
-  <Carousel.Root {plugins}>
-    <Carousel.Content
-      class={positionButtonPreviousAndNext == "top_right" ? "" : "ml-0"}
-    >
-      {@render children?.()}
-    </Carousel.Content>
-    {#if positionButtonPreviousAndNext == "center" && !responsive.isMobile}
-      {#if isButtonPreviousAndNext}
-        <Carousel.Previous
-          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
-        />
-        <Carousel.Next
-          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
-        />
-      {/if}
-    {/if}
-    {#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
-      {#if isButtonPreviousAndNext}
-        <div
-          class="absolute -top-5 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
-        >
-          <Carousel.Previous
-            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
-          />
-          <Carousel.Next
-            class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
-          />
-        </div>
-      {/if}
-    {/if}
-  </Carousel.Root>
-</div>
+<script lang="ts">
+  import * as Carousel from "../carousel/index.js";
+  import { useDevice } from "../../../hooks/responsive.svelte";
+  import type { CarouselSlotProps } from "./type";
+
+  const {
+    positionButtonPreviousAndNext = "center",
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    isBorderBottom = false,
+    containerClass = "w-full",
+    plugins = [],
+    children,
+  }: CarouselSlotProps = $props();
+
+  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
+  const styleCenter =
+    "absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
+
+  const responsive = useDevice();
+</script>
+
+<div
+  class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
+>
+  <Carousel.Root {plugins}>
+    <Carousel.Content
+      class={positionButtonPreviousAndNext == "top_right" ? "" : "ml-0"}
+    >
+      {@render children?.()}
+    </Carousel.Content>
+    {#if positionButtonPreviousAndNext == "center" && !responsive.isMobile}
+      {#if isButtonPreviousAndNext}
+        <Carousel.Previous
+          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+        <Carousel.Next
+          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+      {/if}
+    {/if}
+    {#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
+      {#if isButtonPreviousAndNext}
+        <div
+          class="absolute -top-5 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
+        >
+          <Carousel.Previous
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+          <Carousel.Next
+            class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+        </div>
+      {/if}
+    {/if}
+  </Carousel.Root>
+</div>