negodesign 0.0.26 → 0.0.28

package/dist/components/core/nav/ui/nav-menu-top-bar-sidebar.svelte

@@ -1,103 +1,103 @@
-<script lang="ts">
-	import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
-	import * as Sidebar from "../../../ui/sidebar/index.js";
-	import { useSidebar } from "../../../ui/sidebar/index.js";
-	import type { NavTopBarSidebarItem } from "../data/nav-top-bar-sidebar";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
-
-	// This should be `Component` after @lucide/svelte updates types
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	let { content, dropdownMenu }: NavTopBarSidebarItem = $props();
-	const sidebar = useSidebar();
-</script>
-
-<Sidebar.Menu>
-	<Sidebar.MenuItem>
-		<DropdownMenu.Root>
-			<DropdownMenu.Trigger>
-				{#snippet child({ props })}
-					<Sidebar.MenuButton
-						{...props}
-						size="lg"
-						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-					>
-						<div
-							class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
-						>
-							<content.logo class="size-4" />
-						</div>
-						<div
-							class="grid flex-1 text-start text-sm leading-tight"
-						>
-							<span class="truncate font-medium">
-								{content.title}
-							</span>
-							<span class="truncate text-xs"
-								>{content.subtitle}</span
-							>
-						</div>
-						{#if dropdownMenu}
-							<HugeiconsIcon
-								icon={UnfoldMoreIcon}
-								class="ms-auto"
-							/>
-						{/if}
-					</Sidebar.MenuButton>
-				{/snippet}
-			</DropdownMenu.Trigger>
-			{#if dropdownMenu}
-				<DropdownMenu.Content
-					class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
-					align="start"
-					side={sidebar.isMobile ? "bottom" : "right"}
-					sideOffset={4}
-				>
-					{#if dropdownMenu.header}
-						<DropdownMenu.Label
-							class="text-muted-foreground text-xs"
-						>
-							{#if dropdownMenu.header.icon}
-								<dropdownMenu.header.icon
-									class="size-3.5 shrink-0"
-								/>
-							{/if}
-							{dropdownMenu.header.text}
-						</DropdownMenu.Label>
-					{/if}
-					{#each dropdownMenu.items as it, index (index)}
-						<DropdownMenu.Item
-							onSelect={it.onclick}
-							class="gap-2 p-2"
-						>
-							<div
-								class="flex size-6 items-center justify-center rounded-md border"
-							>
-								<it.icon class="size-3.5 shrink-0" />
-							</div>
-							{it.text}
-							<DropdownMenu.Shortcut>
-								⌘{index + 1}
-							</DropdownMenu.Shortcut>
-						</DropdownMenu.Item>
-					{/each}
-					{#if dropdownMenu.footer}
-						<DropdownMenu.Separator />
-						<DropdownMenu.Item class="gap-2 p-2">
-							<div
-								class="flex size-6 items-center justify-center rounded-md border bg-transparent"
-							>
-								{#if dropdownMenu.footer.icon}
-									<dropdownMenu.footer.icon class="size-4" />
-								{/if}
-							</div>
-							<div class="text-muted-foreground font-medium">
-								{dropdownMenu.footer.text}
-							</div>
-						</DropdownMenu.Item>
-					{/if}
-				</DropdownMenu.Content>
-			{/if}
-		</DropdownMenu.Root>
-	</Sidebar.MenuItem>
-</Sidebar.Menu>
+<script lang="ts">
+	import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+	import * as Sidebar from "../../../ui/sidebar/index.js";
+	import { useSidebar } from "../../../ui/sidebar/index.js";
+	import type { NavTopBarSidebarItem } from "../data/nav-top-bar-sidebar";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+
+	// This should be `Component` after @lucide/svelte updates types
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let { content, dropdownMenu }: NavTopBarSidebarItem = $props();
+	const sidebar = useSidebar();
+</script>
+
+<Sidebar.Menu>
+	<Sidebar.MenuItem>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuButton
+						{...props}
+						size="lg"
+						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+					>
+						<div
+							class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+						>
+							<content.logo class="size-4" />
+						</div>
+						<div
+							class="grid flex-1 text-start text-sm leading-tight"
+						>
+							<span class="truncate font-medium">
+								{content.title}
+							</span>
+							<span class="truncate text-xs"
+								>{content.subtitle}</span
+							>
+						</div>
+						{#if dropdownMenu}
+							<HugeiconsIcon
+								icon={UnfoldMoreIcon}
+								class="ms-auto"
+							/>
+						{/if}
+					</Sidebar.MenuButton>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			{#if dropdownMenu}
+				<DropdownMenu.Content
+					class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+					align="start"
+					side={sidebar.isMobile ? "bottom" : "right"}
+					sideOffset={4}
+				>
+					{#if dropdownMenu.header}
+						<DropdownMenu.Label
+							class="text-muted-foreground text-xs"
+						>
+							{#if dropdownMenu.header.icon}
+								<dropdownMenu.header.icon
+									class="size-3.5 shrink-0"
+								/>
+							{/if}
+							{dropdownMenu.header.text}
+						</DropdownMenu.Label>
+					{/if}
+					{#each dropdownMenu.items as it, index (index)}
+						<DropdownMenu.Item
+							onSelect={it.onclick}
+							class="gap-2 p-2"
+						>
+							<div
+								class="flex size-6 items-center justify-center rounded-md border"
+							>
+								<it.icon class="size-3.5 shrink-0" />
+							</div>
+							{it.text}
+							<DropdownMenu.Shortcut>
+								⌘{index + 1}
+							</DropdownMenu.Shortcut>
+						</DropdownMenu.Item>
+					{/each}
+					{#if dropdownMenu.footer}
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item class="gap-2 p-2">
+							<div
+								class="flex size-6 items-center justify-center rounded-md border bg-transparent"
+							>
+								{#if dropdownMenu.footer.icon}
+									<dropdownMenu.footer.icon class="size-4" />
+								{/if}
+							</div>
+							<div class="text-muted-foreground font-medium">
+								{dropdownMenu.footer.text}
+							</div>
+						</DropdownMenu.Item>
+					{/if}
+				</DropdownMenu.Content>
+			{/if}
+		</DropdownMenu.Root>
+	</Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/core/nav/ui/nav-menu.svelte

@@ -1,106 +1,106 @@
-<script lang="ts">
-  import { Button } from "../../../ui/button/index.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type { NavMenuProps } from "../data/nav-menu";
-  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
-  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
-  import { t } from "../../../../i18n";
-  import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
-  import { useDevice } from "../../../../hooks/responsive.svelte";
-  import NavMenuDrawer from "./mobile/nav-menu-drawer.svelte";
-  import MenuLinks from "./menu-links.svelte";
-
-  let {
-    logo,
-    links,
-    actions,
-    navClass = "w-full",
-    linkClass = "",
-    groupClass = "",
-    buttonClass = "",
-    align = "LINK_SEPARATED_ACTIONS",
-    isLightSwitch = false,
-    isLanguageSwitcher = false,
-    onclickButtonLogin,
-    onclickButtonRegister,
-  }: NavMenuProps = $props();
-
-  const responsive = useDevice();
-</script>
-
-{#snippet actionButtons()}
-  <div class="flex items-center gap-2">
-    {#if isLightSwitch}
-      <LightSwitch />
-    {/if}
-    {#if isLanguageSwitcher}
-      <LanguageSwitcher />
-    {/if}
-    {#each actions ?? [] as item (item.label)}
-      <Button
-        variant={item.type === "LINK" ? "ghost" : "outline"}
-        class={item.className}
-        onclick={item.onclick}
-      >
-        {#if item.icon}
-          <HugeiconsIcon icon={item.icon} />
-        {/if}
-        {item.label}
-      </Button>
-    {/each}
-    {#if onclickButtonRegister}
-      <Button
-        variant="outline"
-        onclick={onclickButtonRegister}
-        class={buttonClass}
-      >
-        <HugeiconsIcon icon={User03Icon} />
-        {$t("label.register")}
-      </Button>
-    {/if}
-    {#if onclickButtonLogin}
-      <Button
-        variant="outline"
-        onclick={onclickButtonLogin}
-        class={buttonClass}
-      >
-        <HugeiconsIcon icon={Login03Icon} />
-        {$t("label.login")}
-      </Button>
-    {/if}
-  </div>
-{/snippet}
-
-<nav
-  class={`flex items-center justify-between container py-5 md:px-5 ${navClass}`}
->
-  {#if logo}
-    <div>
-      {#if logo.img}
-        <img
-          src={logo.img}
-          alt="logo of site"
-          class={`max-h-50 ${logo.className}`}
-        />
-      {:else if logo.label}
-        <span class={logo.className}>{logo.label}</span>
-      {/if}
-    </div>
-  {:else}
-    <div>
-      <span class="hidden">Logo</span>
-    </div>
-  {/if}
-
-  {#if responsive.isMobile}
-    <NavMenuDrawer {links} {onclickButtonLogin} {onclickButtonRegister} />
-  {:else if align === "LINK_SEPARATED_ACTIONS"}
-    <MenuLinks {links} {linkClass} {groupClass} orientation="horizontal" />
-    {@render actionButtons()}
-  {:else if align === "LINK_INTO_ACTIONS"}
-    <div class="flex items-center gap-2">
-      <MenuLinks {links} {linkClass} {groupClass} orientation="vertical" />
-      {@render actionButtons()}
-    </div>
-  {/if}
-</nav>
+<script lang="ts">
+  import { Button } from "../../../ui/button/index.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { NavMenuProps } from "../data/nav-menu";
+  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
+  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
+  import { t } from "../../../../i18n";
+  import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
+  import { useDevice } from "../../../../hooks/responsive.svelte";
+  import NavMenuDrawer from "./mobile/nav-menu-drawer.svelte";
+  import MenuLinks from "./menu-links.svelte";
+
+  let {
+    logo,
+    links,
+    actions,
+    navClass = "w-full",
+    linkClass = "",
+    groupClass = "",
+    buttonClass = "",
+    align = "LINK_SEPARATED_ACTIONS",
+    isLightSwitch = false,
+    isLanguageSwitcher = false,
+    onclickButtonLogin,
+    onclickButtonRegister,
+  }: NavMenuProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+{#snippet actionButtons()}
+  <div class="flex items-center gap-2">
+    {#if isLightSwitch}
+      <LightSwitch />
+    {/if}
+    {#if isLanguageSwitcher}
+      <LanguageSwitcher />
+    {/if}
+    {#each actions ?? [] as item (item.label)}
+      <Button
+        variant={item.type === "LINK" ? "ghost" : "outline"}
+        class={item.className}
+        onclick={item.onclick}
+      >
+        {#if item.icon}
+          <HugeiconsIcon icon={item.icon} />
+        {/if}
+        {item.label}
+      </Button>
+    {/each}
+    {#if onclickButtonRegister}
+      <Button
+        variant="outline"
+        onclick={onclickButtonRegister}
+        class={buttonClass}
+      >
+        <HugeiconsIcon icon={User03Icon} />
+        {$t("label.register")}
+      </Button>
+    {/if}
+    {#if onclickButtonLogin}
+      <Button
+        variant="outline"
+        onclick={onclickButtonLogin}
+        class={buttonClass}
+      >
+        <HugeiconsIcon icon={Login03Icon} />
+        {$t("label.login")}
+      </Button>
+    {/if}
+  </div>
+{/snippet}
+
+<nav
+  class={`flex items-center justify-between container py-5 md:px-5 ${navClass}`}
+>
+  {#if logo}
+    <div>
+      {#if logo.img}
+        <img
+          src={logo.img}
+          alt="logo of site"
+          class={`max-h-50 ${logo.className}`}
+        />
+      {:else if logo.label}
+        <span class={logo.className}>{logo.label}</span>
+      {/if}
+    </div>
+  {:else}
+    <div>
+      <span class="hidden">Logo</span>
+    </div>
+  {/if}
+
+  {#if responsive.isMobile}
+    <NavMenuDrawer {links} {onclickButtonLogin} {onclickButtonRegister} />
+  {:else if align === "LINK_SEPARATED_ACTIONS"}
+    <MenuLinks {links} {linkClass} {groupClass} orientation="horizontal" />
+    {@render actionButtons()}
+  {:else if align === "LINK_INTO_ACTIONS"}
+    <div class="flex items-center gap-2">
+      <MenuLinks {links} {linkClass} {groupClass} orientation="vertical" />
+      {@render actionButtons()}
+    </div>
+  {/if}
+</nav>

package/dist/components/core/panel/CarouselSlot.svelte

@@ -1,63 +1,63 @@
-<script lang="ts">
-  import * as Carousel from "../../ui/carousel/index.js";
-  import type { Snippet } from "svelte";
-  import type { CarouselPlugins } from "../../ui/carousel/context.js";
-
-  type Props = {
-    positionButtonPreviousAndNext?: "center" | "top_right";
-    buttonPreviousAndNextClass?: string;
-    isButtonPreviousAndNext?: boolean;
-    isBorderBottom?: boolean;
-    containerClass?: string;
-    plugins?: CarouselPlugins;
-    children: Snippet;
-  };
-
-  const {
-    positionButtonPreviousAndNext = "center",
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-    isBorderBottom = true,
-    containerClass = "",
-    plugins = [],
-    children,
-  }: Props = $props();
-
-  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
-  const styleCenter =
-    "absolute top-1/2 -translate-y-1/2 mt-0.5 mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
-</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"}
-      {#if isButtonPreviousAndNext}
-        <Carousel.Previous
-          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
-        />
-        <Carousel.Next
-          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
-        />
-      {/if}
-    {/if}
-    {#if positionButtonPreviousAndNext == "top_right"}
-      {#if isButtonPreviousAndNext}
-        <div class="absolute -top-6 right-10 md:right-10 lg:right-12 z-20">
-          <Carousel.Previous
-            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
-          />
-          <Carousel.Next
-            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
-          />
-        </div>
-      {/if}
-    {/if}
-  </Carousel.Root>
-</div>
+<script lang="ts">
+  import * as Carousel from "../../ui/carousel/index.js";
+  import type { Snippet } from "svelte";
+  import type { CarouselPlugins } from "../../ui/carousel/context.js";
+
+  type Props = {
+    positionButtonPreviousAndNext?: "center" | "top_right";
+    buttonPreviousAndNextClass?: string;
+    isButtonPreviousAndNext?: boolean;
+    isBorderBottom?: boolean;
+    containerClass?: string;
+    plugins?: CarouselPlugins;
+    children: Snippet;
+  };
+
+  const {
+    positionButtonPreviousAndNext = "center",
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    isBorderBottom = true,
+    containerClass = "",
+    plugins = [],
+    children,
+  }: Props = $props();
+
+  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
+  const styleCenter =
+    "absolute top-1/2 -translate-y-1/2 mt-0.5 mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
+</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"}
+      {#if isButtonPreviousAndNext}
+        <Carousel.Previous
+          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+        <Carousel.Next
+          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+      {/if}
+    {/if}
+    {#if positionButtonPreviousAndNext == "top_right"}
+      {#if isButtonPreviousAndNext}
+        <div class="absolute -top-6 right-10 md:right-10 lg:right-12 z-20">
+          <Carousel.Previous
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+          <Carousel.Next
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+        </div>
+      {/if}
+    {/if}
+  </Carousel.Root>
+</div>