negodesign 0.0.80 → 0.0.82

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -1,61 +1,61 @@
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import { getDropdownMenuContext } from "./dropdown-menu-context.svelte.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLButtonElement | null>(null),
-		class: className,
-		disabled,
-		inset,
-		variant = "default",
-		onSelect,
-		onclick,
-		children,
-		...restProps
-	}: HTMLButtonAttributes & {
-		ref?: HTMLButtonElement | null;
-		class?: string;
-		disabled?: boolean;
-		inset?: boolean;
-		variant?: "default" | "destructive";
-		onSelect?: (event: MouseEvent) => void;
-		onclick?: (event: MouseEvent) => void;
-		children?: Snippet;
-	} = $props();
-
-	const store = getDropdownMenuContext();
-
-	let highlighted = $state(false);
-
-	function handleSelect(event: MouseEvent) {
-		onclick?.(event);
-		onSelect?.(event);
-		store.closeMenu();
-	}
-</script>
-
-<button
-	bind:this={ref}
-	type="button"
-	role="menuitem"
-	tabindex="-1"
-	data-slot="dropdown-menu-item"
-	data-inset={inset}
-	data-variant={variant}
-	data-highlighted={highlighted || undefined}
-	{disabled}
-	onclick={handleSelect}
-	onfocus={() => (highlighted = true)}
-	onblur={() => (highlighted = false)}
-	onmouseenter={() => (highlighted = true)}
-	onmouseleave={() => (highlighted = false)}
-	class={cn(
-		"group/dropdown-menu-item relative flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-		className,
-	)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import { getDropdownMenuContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLButtonElement | null>(null),
+		class: className,
+		disabled,
+		inset,
+		variant = "default",
+		onSelect,
+		onclick,
+		children,
+		...restProps
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		disabled?: boolean;
+		inset?: boolean;
+		variant?: "default" | "destructive";
+		onSelect?: (event: MouseEvent) => void;
+		onclick?: (event: MouseEvent) => void;
+		children?: Snippet;
+	} = $props();
+
+	const store = getDropdownMenuContext();
+
+	let highlighted = $state(false);
+
+	function handleSelect(event: MouseEvent) {
+		onclick?.(event);
+		onSelect?.(event);
+		store.closeMenu();
+	}
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	role="menuitem"
+	tabindex="-1"
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	data-highlighted={highlighted || undefined}
+	{disabled}
+	onclick={handleSelect}
+	onfocus={() => (highlighted = true)}
+	onblur={() => (highlighted = false)}
+	onmouseenter={() => (highlighted = true)}
+	onmouseleave={() => (highlighted = false)}
+	class={cn(
+		"group/dropdown-menu-item relative flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
 </button>

package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLDivElement | null>(null),
-		class: className,
-		inset,
-		children,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLDivElement | null;
-		class?: string;
-		inset?: boolean;
-		children?: Snippet;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="dropdown-menu-label"
-	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-medium text-foreground", className)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		inset?: boolean;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-medium text-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/dropdown-menu/dropdown-menu-portal.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	let { children }: { children?: Snippet } = $props();
-</script>
-
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
 {@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -1,44 +1,44 @@
-<script lang="ts">
-	import { setDropdownMenuRadioGroupContext } from "./dropdown-menu-context.svelte.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLDivElement | null>(null),
-		value = $bindable<string>(),
-		onValueChange,
-		children,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLDivElement | null;
-		value?: string;
-		onValueChange?: (value: string) => void;
-		children?: Snippet;
-	} = $props();
-
-	let groupState = $state({ value: value ?? "" });
-
-	$effect(() => {
-		if (value !== undefined && value !== groupState.value) {
-			groupState.value = value;
-		}
-	});
-
-	function setValue(next: string) {
-		if (next === groupState.value) return;
-		groupState.value = next;
-		value = next;
-		onValueChange?.(next);
-	}
-
-	setDropdownMenuRadioGroupContext({ state: groupState, setValue });
-</script>
-
-<div
-	bind:this={ref}
-	role="radiogroup"
-	data-slot="dropdown-menu-radio-group"
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { setDropdownMenuRadioGroupContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		value = $bindable<string>(),
+		onValueChange,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		value?: string;
+		onValueChange?: (value: string) => void;
+		children?: Snippet;
+	} = $props();
+
+	let groupState = $state({ value: value ?? "" });
+
+	$effect(() => {
+		if (value !== undefined && value !== groupState.value) {
+			groupState.value = value;
+		}
+	});
+
+	function setValue(next: string) {
+		if (next === groupState.value) return;
+		groupState.value = next;
+		value = next;
+		onValueChange?.(next);
+	}
+
+	setDropdownMenuRadioGroupContext({ state: groupState, setValue });
+</script>
+
+<div
+	bind:this={ref}
+	role="radiogroup"
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,71 +1,71 @@
-<script lang="ts">
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { Tick02Icon } from "@hugeicons/core-free-icons";
-	import { cn } from "../../../utils.js";
-	import { getDropdownMenuRadioGroupContext } from "./dropdown-menu-context.svelte.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLButtonElement | null>(null),
-		id,
-		value,
-		class: className,
-		disabled,
-		onclick,
-		children,
-		...restProps
-	}: HTMLButtonAttributes & {
-		ref?: HTMLButtonElement | null;
-		id?: string;
-		value: string;
-		class?: string;
-		disabled?: boolean;
-		onclick?: (event: MouseEvent) => void;
-		children?: Snippet;
-	} = $props();
-
-	const group = getDropdownMenuRadioGroupContext();
-
-	let isChecked = $derived(group.state.value === value);
-
-	let highlighted = $state(false);
-
-	function handleClick(event: MouseEvent) {
-		onclick?.(event);
-		group.setValue(value);
-	}
-</script>
-
-<button
-	bind:this={ref}
-	type="button"
-	role="menuitemradio"
-	tabindex="-1"
-	{id}
-	data-slot="dropdown-menu-radio-item"
-	data-state={isChecked ? "checked" : "unchecked"}
-	data-highlighted={highlighted || undefined}
-	aria-checked={isChecked}
-	{disabled}
-	onclick={handleClick}
-	onfocus={() => (highlighted = true)}
-	onblur={() => (highlighted = false)}
-	onmouseenter={() => (highlighted = true)}
-	onmouseleave={() => (highlighted = false)}
-	class={cn(
-		"relative flex w-full cursor-pointer items-center justify-start gap-2.5 rounded-lg px-2 py-1.5 pr-8 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-		className,
-	)}
-	{...restProps}
->
-	<span
-		class="absolute right-2 flex size-4 items-center justify-center pointer-events-none"
-		data-slot="dropdown-menu-radio-item-indicator"
-	>
-		{#if isChecked}
-			<HugeiconsIcon icon={Tick02Icon} strokeWidth={2} class="size-4" />
-		{/if}
-	</span>
-	{@render children?.()}
+<script lang="ts">
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { Tick02Icon } from "@hugeicons/core-free-icons";
+	import { cn } from "../../../utils.js";
+	import { getDropdownMenuRadioGroupContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLButtonElement | null>(null),
+		id,
+		value,
+		class: className,
+		disabled,
+		onclick,
+		children,
+		...restProps
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		id?: string;
+		value: string;
+		class?: string;
+		disabled?: boolean;
+		onclick?: (event: MouseEvent) => void;
+		children?: Snippet;
+	} = $props();
+
+	const group = getDropdownMenuRadioGroupContext();
+
+	let isChecked = $derived(group.state.value === value);
+
+	let highlighted = $state(false);
+
+	function handleClick(event: MouseEvent) {
+		onclick?.(event);
+		group.setValue(value);
+	}
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	role="menuitemradio"
+	tabindex="-1"
+	{id}
+	data-slot="dropdown-menu-radio-item"
+	data-state={isChecked ? "checked" : "unchecked"}
+	data-highlighted={highlighted || undefined}
+	aria-checked={isChecked}
+	{disabled}
+	onclick={handleClick}
+	onfocus={() => (highlighted = true)}
+	onblur={() => (highlighted = false)}
+	onmouseenter={() => (highlighted = true)}
+	onmouseleave={() => (highlighted = false)}
+	class={cn(
+		"relative flex w-full cursor-pointer items-center justify-start gap-2.5 rounded-lg px-2 py-1.5 pr-8 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+		className,
+	)}
+	{...restProps}
+>
+	<span
+		class="absolute right-2 flex size-4 items-center justify-center pointer-events-none"
+		data-slot="dropdown-menu-radio-item-indicator"
+	>
+		{#if isChecked}
+			<HugeiconsIcon icon={Tick02Icon} strokeWidth={2} class="size-4" />
+		{/if}
+	</span>
+	{@render children?.()}
 </button>

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLDivElement | null>(null),
-		class: className,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLDivElement | null;
-		class?: string;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	role="separator"
-	data-slot="dropdown-menu-separator"
-	class={cn("h-px bg-border my-1", className)}
-	{...restProps}
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="separator"
+	data-slot="dropdown-menu-separator"
+	class={cn("h-px bg-border my-1", className)}
+	{...restProps}
 ></div>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,34 +1,34 @@
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import { getDropdownMenuSubContext } from "./dropdown-menu-context.svelte.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLDivElement | null>(null),
-		class: className,
-		children,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLDivElement | null;
-		class?: string;
-		children?: Snippet;
-	} = $props();
-
-	const subStore = getDropdownMenuSubContext();
-</script>
-
-{#if subStore.open}
-	<div
-		bind:this={ref}
-		data-slot="dropdown-menu-sub-content"
-		data-state={subStore.open ? "open" : "closed"}
-		class={cn(
-			"absolute left-full top-0 z-50 ml-2 w-auto min-w-36 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 animate-zoom-in",
-			className,
-		)}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import { getDropdownMenuSubContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		class: className,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		children?: Snippet;
+	} = $props();
+
+	const subStore = getDropdownMenuSubContext();
+</script>
+
+{#if subStore.open}
+	<div
+		bind:this={ref}
+		data-slot="dropdown-menu-sub-content"
+		data-state={subStore.open ? "open" : "closed"}
+		class={cn(
+			"absolute left-full top-0 z-50 ml-2 w-auto min-w-36 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 animate-zoom-in",
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 {/if}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,58 +1,58 @@
-<script lang="ts">
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-	import { cn } from "../../../utils.js";
-	import { getDropdownMenuSubContext } from "./dropdown-menu-context.svelte.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLButtonElement | null>(null),
-		class: className,
-		inset,
-		disabled,
-		children,
-		...restProps
-	}: HTMLButtonAttributes & {
-		ref?: HTMLButtonElement | null;
-		class?: string;
-		inset?: boolean;
-		disabled?: boolean;
-		children?: Snippet;
-	} = $props();
-
-	const subStore = getDropdownMenuSubContext();
-
-	let highlighted = $state(false);
-
-	function handleClick() {
-		subStore.open = !subStore.open;
-	}
-</script>
-
-<button
-	bind:this={ref}
-	type="button"
-	role="menuitem"
-	tabindex="-1"
-	data-slot="dropdown-menu-sub-trigger"
-	data-inset={inset}
-	data-state={subStore.open ? "open" : "closed"}
-	data-highlighted={highlighted || undefined}
-	{disabled}
-	onclick={handleClick}
-	onfocus={() => (highlighted = true)}
-	onblur={() => (highlighted = false)}
-	onmouseenter={() => (highlighted = true)}
-	onmouseleave={() => {
-		highlighted = false;
-	}}
-	class={cn(
-		"relative flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-		className,
-	)}
-	{...restProps}
->
-	{@render children?.()}
-	<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} class="ms-auto size-3.5" />
+<script lang="ts">
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+	import { cn } from "../../../utils.js";
+	import { getDropdownMenuSubContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLButtonElement | null>(null),
+		class: className,
+		inset,
+		disabled,
+		children,
+		...restProps
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		inset?: boolean;
+		disabled?: boolean;
+		children?: Snippet;
+	} = $props();
+
+	const subStore = getDropdownMenuSubContext();
+
+	let highlighted = $state(false);
+
+	function handleClick() {
+		subStore.open = !subStore.open;
+	}
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	role="menuitem"
+	tabindex="-1"
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	data-state={subStore.open ? "open" : "closed"}
+	data-highlighted={highlighted || undefined}
+	{disabled}
+	onclick={handleClick}
+	onfocus={() => (highlighted = true)}
+	onblur={() => (highlighted = false)}
+	onmouseenter={() => (highlighted = true)}
+	onmouseleave={() => {
+		highlighted = false;
+	}}
+	class={cn(
+		"relative flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} class="ms-auto size-3.5" />
 </button>