negodesign 0.0.80 → 0.0.82

package/dist/components/ui/sidebar/core/ui/navbar/NavMenuTopBarSidebar.svelte

@@ -1,101 +1,101 @@
-<script lang="ts">
-	import * as DropdownMenu from "../../../../dropdown-menu/index.js";
-	import * as Sidebar from "../../../index.js";
-	import { useSidebar } from "../../../index.js";
-	import type { NavTopBarSidebarItem } from "../../data/nav-top-bar-sidebar";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
-
-	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 "../../../../dropdown-menu/index.js";
+	import * as Sidebar from "../../../index.js";
+	import { useSidebar } from "../../../index.js";
+	import type { NavTopBarSidebarItem } from "../../data/nav-top-bar-sidebar";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+
+	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/ui/sidebar/core/ui/navbar/nav-menu-header-sidebar.svelte

@@ -1,77 +1,77 @@
-<script lang="ts">
-  import * as DropdownMenu from "../../../../dropdown-menu/index.js";
-  import * as Sidebar from "../../../index.js";
-  import { useSidebar } from "../../../index.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { PlusSignIcon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let { teams }: { teams: { name: string; logo: any; plan: string }[] } =
-    $props();
-  const sidebar = useSidebar();
-
-  // svelte-ignore state_referenced_locally
-  let activeTeam = $state(teams[0]);
-</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"
-            >
-              <activeTeam.logo class="size-4" />
-            </div>
-            <div class="grid flex-1 text-start text-sm leading-tight">
-              <span class="truncate font-medium">
-                {activeTeam.name}
-              </span>
-              <span class="truncate text-xs">{activeTeam.plan}</span>
-            </div>
-            <HugeiconsIcon icon={UnfoldMoreIcon} class="ms-auto" />
-          </Sidebar.MenuButton>
-        {/snippet}
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
-        align="start"
-        side={sidebar.isMobile ? "bottom" : "right"}
-        sideOffset={4}
-      >
-        <DropdownMenu.Label class="text-muted-foreground text-xs"
-          >Teams</DropdownMenu.Label
-        >
-        {#each teams as team, index (team.name)}
-          <DropdownMenu.Item
-            onSelect={() => (activeTeam = team)}
-            class="gap-2 p-2"
-          >
-            <div
-              class="flex size-6 items-center justify-center rounded-md border"
-            >
-              <team.logo class="size-3.5 shrink-0" />
-            </div>
-            {team.name}
-            <DropdownMenu.Shortcut>⌘{index + 1}</DropdownMenu.Shortcut>
-          </DropdownMenu.Item>
-        {/each}
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item class="gap-2 p-2">
-          <div
-            class="flex size-6 items-center justify-center rounded-md border bg-transparent"
-          >
-            <HugeiconsIcon icon={PlusSignIcon} class="size-4" />
-          </div>
-          <div class="text-muted-foreground font-medium">Add team</div>
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  </Sidebar.MenuItem>
-</Sidebar.Menu>
+<script lang="ts">
+  import * as DropdownMenu from "../../../../dropdown-menu/index.js";
+  import * as Sidebar from "../../../index.js";
+  import { useSidebar } from "../../../index.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { PlusSignIcon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let { teams }: { teams: { name: string; logo: any; plan: string }[] } =
+    $props();
+  const sidebar = useSidebar();
+
+  // svelte-ignore state_referenced_locally
+  let activeTeam = $state(teams[0]);
+</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"
+            >
+              <activeTeam.logo class="size-4" />
+            </div>
+            <div class="grid flex-1 text-start text-sm leading-tight">
+              <span class="truncate font-medium">
+                {activeTeam.name}
+              </span>
+              <span class="truncate text-xs">{activeTeam.plan}</span>
+            </div>
+            <HugeiconsIcon icon={UnfoldMoreIcon} class="ms-auto" />
+          </Sidebar.MenuButton>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+        align="start"
+        side={sidebar.isMobile ? "bottom" : "right"}
+        sideOffset={4}
+      >
+        <DropdownMenu.Label class="text-muted-foreground text-xs"
+          >Teams</DropdownMenu.Label
+        >
+        {#each teams as team, index (team.name)}
+          <DropdownMenu.Item
+            onSelect={() => (activeTeam = team)}
+            class="gap-2 p-2"
+          >
+            <div
+              class="flex size-6 items-center justify-center rounded-md border"
+            >
+              <team.logo class="size-3.5 shrink-0" />
+            </div>
+            {team.name}
+            <DropdownMenu.Shortcut>⌘{index + 1}</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+        {/each}
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item class="gap-2 p-2">
+          <div
+            class="flex size-6 items-center justify-center rounded-md border bg-transparent"
+          >
+            <HugeiconsIcon icon={PlusSignIcon} class="size-4" />
+          </div>
+          <div class="text-muted-foreground font-medium">Add team</div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/ui/sidebar/sidebar-content.svelte

@@ -1,24 +1,24 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-content"
-	data-sidebar="content"
-	class={cn(
-		"no-scrollbar gap-2 [--radius:var(--radius-xl)] flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-		className,
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-content"
+	data-sidebar="content"
+	class={cn(
+		"no-scrollbar gap-2 [--radius:var(--radius-xl)] flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sidebar/sidebar-footer.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-footer"
-	data-sidebar="footer"
-	class={cn("mt-auto gap-2 p-2 flex flex-col", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn("mt-auto gap-2 p-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sidebar/sidebar-group-content.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-group-content"
-	data-sidebar="group-content"
-	class={cn("text-sm", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn("text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sidebar/sidebar-menu-action.svelte

@@ -1,38 +1,38 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		showOnHover = false,
-		children,
-		child,
-		...restProps
-	}: WithElementRef<HTMLButtonAttributes> & {
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		showOnHover?: boolean;
-	} = $props();
-
-	const mergedProps = $derived({
-		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
-			showOnHover
-				? "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0"
-				: "",
-			className
-		),
-		"data-slot": "sidebar-menu-action",
-		"data-sidebar": "menu-action",
-		...restProps,
-	});
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<button bind:this={ref} {...mergedProps}>
-		{@render children?.()}
-	</button>
-{/if}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showOnHover = false,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		showOnHover?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+			showOnHover
+				? "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0"
+				: "",
+			className
+		),
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}