negodesign 0.0.73 → 0.0.74

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

@@ -1,107 +1,107 @@
-<script lang="ts">
-	import { getDropdownMenuContext } from "./dropdown-menu-context.svelte.js";
-	import { cn } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLDivElement | null>(null),
-		align = "start",
-		side = "bottom",
-		sideOffset = 4,
-		portalProps,
-		class: className,
-		children,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLDivElement | null;
-		align?: "start" | "center" | "end";
-		side?: "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end";
-		sideOffset?: number;
-		portalProps?: Record<string, unknown>;
-		class?: string;
-		children?: Snippet;
-	} = $props();
-
-	const store = getDropdownMenuContext();
-
-	let anchorWidth = $state(0);
-
-	$effect(() => {
-		if (!store.open) return;
-		const width = store.anchorEl?.getBoundingClientRect().width ?? 0;
-		if (width > 0) anchorWidth = width;
-	});
-
-	$effect(() => {
-		if (!store.open) return;
-		function handlePointerDown(event: PointerEvent) {
-			const target = event.target as Node;
-			if (store.anchorEl?.contains(target)) return;
-			if (ref?.contains(target)) return;
-			store.closeMenu();
-		}
-		function handleKeydown(event: KeyboardEvent) {
-			if (event.key === "Escape") {
-				store.closeMenu();
-				store.anchorEl?.focus();
-			}
-		}
-		document.addEventListener("pointerdown", handlePointerDown);
-		document.addEventListener("keydown", handleKeydown);
-		return () => {
-			document.removeEventListener("pointerdown", handlePointerDown);
-			document.removeEventListener("keydown", handleKeydown);
-		};
-	});
-
-	let positionClasses = $derived.by(() => {
-		const horizontal =
-			side === "right" || side === "left" || side === "inline-start" || side === "inline-end";
-		if (horizontal) {
-			const sideClass = side === "left" || side === "inline-start" ? "right-full" : "left-full";
-			const alignClass =
-				align === "end"
-					? "bottom-0"
-					: align === "center"
-						? "top-1/2 -translate-y-1/2"
-						: "top-0";
-			const margin =
-				side === "left" || side === "inline-start"
-					? `margin-right: ${sideOffset + 4}px`
-					: `margin-left: ${sideOffset + 4}px`;
-			return { sideClass, alignClass, margin };
-		}
-		const sideClass = side === "top" ? "bottom-full" : "top-full";
-		const alignClass =
-			align === "end" ? "end-0" : align === "center" ? "start-1/2 -translate-x-1/2" : "start-0";
-		const margin =
-			side === "top"
-				? `margin-bottom: ${sideOffset + 4}px`
-				: `margin-top: ${sideOffset + 4}px`;
-		return { sideClass, alignClass, margin };
-	});
-
-	let contentStyle = $derived(
-		`${positionClasses.margin}${anchorWidth > 0 ? `;--bits-dropdown-menu-anchor-width: ${anchorWidth}px` : ""}`,
-	);
-</script>
-
-{#if store.open}
-	<div
-		bind:this={ref}
-		data-slot="dropdown-menu-content"
-		role="menu"
-		data-state={store.open ? "open" : "closed"}
-		style={contentStyle}
-		class={cn(
-			"absolute z-50 min-w-48 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 ring-foreground/5 bg-popover text-popover-foreground outline-none animate-zoom-in",
-			positionClasses.sideClass,
-			positionClasses.alignClass,
-			className,
-		)}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import { getDropdownMenuContext } from "./dropdown-menu-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		align = "start",
+		side = "bottom",
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		align?: "start" | "center" | "end";
+		side?: "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end";
+		sideOffset?: number;
+		portalProps?: Record<string, unknown>;
+		class?: string;
+		children?: Snippet;
+	} = $props();
+
+	const store = getDropdownMenuContext();
+
+	let anchorWidth = $state(0);
+
+	$effect(() => {
+		if (!store.open) return;
+		const width = store.anchorEl?.getBoundingClientRect().width ?? 0;
+		if (width > 0) anchorWidth = width;
+	});
+
+	$effect(() => {
+		if (!store.open) return;
+		function handlePointerDown(event: PointerEvent) {
+			const target = event.target as Node;
+			if (store.anchorEl?.contains(target)) return;
+			if (ref?.contains(target)) return;
+			store.closeMenu();
+		}
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === "Escape") {
+				store.closeMenu();
+				store.anchorEl?.focus();
+			}
+		}
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeydown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeydown);
+		};
+	});
+
+	let positionClasses = $derived.by(() => {
+		const horizontal =
+			side === "right" || side === "left" || side === "inline-start" || side === "inline-end";
+		if (horizontal) {
+			const sideClass = side === "left" || side === "inline-start" ? "right-full" : "left-full";
+			const alignClass =
+				align === "end"
+					? "bottom-0"
+					: align === "center"
+						? "top-1/2 -translate-y-1/2"
+						: "top-0";
+			const margin =
+				side === "left" || side === "inline-start"
+					? `margin-right: ${sideOffset + 4}px`
+					: `margin-left: ${sideOffset + 4}px`;
+			return { sideClass, alignClass, margin };
+		}
+		const sideClass = side === "top" ? "bottom-full" : "top-full";
+		const alignClass =
+			align === "end" ? "end-0" : align === "center" ? "start-1/2 -translate-x-1/2" : "start-0";
+		const margin =
+			side === "top"
+				? `margin-bottom: ${sideOffset + 4}px`
+				: `margin-top: ${sideOffset + 4}px`;
+		return { sideClass, alignClass, margin };
+	});
+
+	let contentStyle = $derived(
+		`${positionClasses.margin}${anchorWidth > 0 ? `;--bits-dropdown-menu-anchor-width: ${anchorWidth}px` : ""}`,
+	);
+</script>
+
+{#if store.open}
+	<div
+		bind:this={ref}
+		data-slot="dropdown-menu-content"
+		role="menu"
+		data-state={store.open ? "open" : "closed"}
+		style={contentStyle}
+		class={cn(
+			"absolute z-50 min-w-48 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 ring-foreground/5 bg-popover text-popover-foreground outline-none animate-zoom-in",
+			positionClasses.sideClass,
+			positionClasses.alignClass,
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 {/if}

package/dist/components/ui/dropdown-menu/dropdown-menu-group-heading.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-group-heading"
-	data-inset={inset}
-	class={cn("px-2 py-1.5 text-xs font-medium text-muted-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-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

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

@@ -1,22 +1,22 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLDivElement | null>(null),
-		children,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLDivElement | null;
-		children?: Snippet;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	role="group"
-	data-slot="dropdown-menu-group"
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="dropdown-menu-group"
+	{...restProps}
+>
+	{@render children?.()}
 </div>

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>