negodesign 0.0.80 → 0.0.82

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

@@ -1,82 +1,82 @@
-<script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "../../../utils.js";
-	import type { ComponentProps, Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-	import DrawerPortal from "./drawer-portal.svelte";
-	import DrawerOverlay from "./drawer-overlay.svelte";
-	import { useDrawerContext } from "./drawer.svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		portalProps,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
-		children?: Snippet;
-	} = $props();
-
-	const drawer = useDrawerContext();
-
-	$effect(() => {
-		if (!drawer.open) return;
-		const previous = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		const onKeydown = (event: KeyboardEvent) => {
-			if (event.key === "Escape") drawer.setOpen(false);
-		};
-		document.addEventListener("keydown", onKeydown);
-		return () => {
-			document.body.style.overflow = previous;
-			document.removeEventListener("keydown", onKeydown);
-		};
-	});
-
-	const directionClasses = $derived(
-		drawer.direction === "left" || drawer.direction === "right"
-			? cn(
-					"inset-y-0 w-full max-w-sm",
-					drawer.direction === "left"
-						? "left-0 border-r rounded-r-xl"
-						: "right-0 border-l rounded-l-xl"
-				)
-			: cn(
-					"inset-x-0 h-auto max-h-[80vh]",
-					drawer.direction === "bottom"
-						? "bottom-0 mt-24 rounded-t-xl border-t animate-slide-in-up"
-						: "top-0 mb-24 rounded-b-xl border-b animate-slide-in-down"
-				)
-	);
-</script>
-
-{#if drawer.open}
-	<DrawerPortal {...portalProps}>
-		<DrawerOverlay />
-		<div
-			bind:this={ref}
-			data-slot="drawer-content"
-			data-state={drawer.open ? "open" : "closed"}
-			data-vaul-drawer-direction={drawer.direction}
-			class={cn(
-				"bg-background text-foreground fixed z-50 flex flex-col border p-4 group/drawer-content",
-				directionClasses,
-				className
-			)}
-			{...restProps}
-		>
-			<div
-				aria-hidden="true"
-				class={cn(
-					"bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full",
-					drawer.direction === "bottom" || drawer.direction === "top"
-						? "block"
-						: "hidden"
-				)}
-			></div>
-			<div class="flex h-full w-full flex-col">
-				{@render children?.()}
-			</div>
-		</div>
-	</DrawerPortal>
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { useDrawerContext } from "./drawer.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+		children?: Snippet;
+	} = $props();
+
+	const drawer = useDrawerContext();
+
+	$effect(() => {
+		if (!drawer.open) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const onKeydown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") drawer.setOpen(false);
+		};
+		document.addEventListener("keydown", onKeydown);
+		return () => {
+			document.body.style.overflow = previous;
+			document.removeEventListener("keydown", onKeydown);
+		};
+	});
+
+	const directionClasses = $derived(
+		drawer.direction === "left" || drawer.direction === "right"
+			? cn(
+					"inset-y-0 w-full max-w-sm",
+					drawer.direction === "left"
+						? "left-0 border-r rounded-r-xl"
+						: "right-0 border-l rounded-l-xl"
+				)
+			: cn(
+					"inset-x-0 h-auto max-h-[80vh]",
+					drawer.direction === "bottom"
+						? "bottom-0 mt-24 rounded-t-xl border-t animate-slide-in-up"
+						: "top-0 mb-24 rounded-b-xl border-b animate-slide-in-down"
+				)
+	);
+</script>
+
+{#if drawer.open}
+	<DrawerPortal {...portalProps}>
+		<DrawerOverlay />
+		<div
+			bind:this={ref}
+			data-slot="drawer-content"
+			data-state={drawer.open ? "open" : "closed"}
+			data-vaul-drawer-direction={drawer.direction}
+			class={cn(
+				"bg-background text-foreground fixed z-50 flex flex-col border p-4 group/drawer-content",
+				directionClasses,
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				aria-hidden="true"
+				class={cn(
+					"bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full",
+					drawer.direction === "bottom" || drawer.direction === "top"
+						? "block"
+						: "hidden"
+				)}
+			></div>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</div>
+	</DrawerPortal>
 {/if}

package/dist/components/ui/drawer/drawer-description.svelte

@@ -1,20 +1,20 @@
-<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<HTMLParagraphElement>> = $props();
-</script>
-
-<p
-	bind:this={ref}
-	data-slot="drawer-description"
-	class={cn("text-muted-foreground text-sm", className)}
-	{...restProps}
->
-	{@render children?.()}
+<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<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="drawer-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </p>

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

@@ -1,20 +1,20 @@
-<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="drawer-footer"
-	class={cn("gap-2 p-4 mt-auto flex flex-col", 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="drawer-footer"
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/drawer/drawer-header.svelte

@@ -1,20 +1,20 @@
-<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<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="drawer-header"
-	class={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left 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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="drawer-header"
+	class={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/drawer/drawer-nested.svelte

@@ -1,35 +1,35 @@
-<script lang="ts">
-	import { type Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { setDrawerContext, useDrawerContext } from "./drawer.svelte";
-
-	let {
-		open = $bindable(false),
-		direction = "bottom",
-		class: className,
-		children,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		open?: boolean;
-		direction?: "top" | "right" | "bottom" | "left";
-		children?: Snippet;
-	} = $props();
-
-	useDrawerContext();
-
-	setDrawerContext({
-		get open() {
-			return open;
-		},
-		get direction() {
-			return direction;
-		},
-		setOpen(value: boolean) {
-			open = value;
-		},
-	});
-</script>
-
-<div data-slot="drawer-nested" class={className} {...restProps}>
-	{@render children?.()}
+<script lang="ts">
+	import { type Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { setDrawerContext, useDrawerContext } from "./drawer.svelte";
+
+	let {
+		open = $bindable(false),
+		direction = "bottom",
+		class: className,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		open?: boolean;
+		direction?: "top" | "right" | "bottom" | "left";
+		children?: Snippet;
+	} = $props();
+
+	useDrawerContext();
+
+	setDrawerContext({
+		get open() {
+			return open;
+		},
+		get direction() {
+			return direction;
+		},
+		setOpen(value: boolean) {
+			open = value;
+		},
+	});
+</script>
+
+<div data-slot="drawer-nested" class={className} {...restProps}>
+	{@render children?.()}
 </div>

package/dist/components/ui/drawer/drawer-overlay.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { useDrawerContext } from "./drawer.svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	const drawer = useDrawerContext();
-</script>
-
-{#if drawer.open}
-	<div
-		bind:this={ref}
-		data-slot="drawer-overlay"
-		class={cn(
-			"bg-black/60 fixed inset-0 z-40 animate-fade-in",
-			className
-		)}
-		onclick={() => drawer.setOpen(false)}
-		{...restProps}
-	></div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useDrawerContext } from "./drawer.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const drawer = useDrawerContext();
+</script>
+
+{#if drawer.open}
+	<div
+		bind:this={ref}
+		data-slot="drawer-overlay"
+		class={cn(
+			"bg-black/60 fixed inset-0 z-40 animate-fade-in",
+			className
+		)}
+		onclick={() => drawer.setOpen(false)}
+		{...restProps}
+	></div>
 {/if}

package/dist/components/ui/drawer/drawer-portal.svelte

@@ -1,20 +1,20 @@
-<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<HTMLElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="drawer-portal"
-	class={cn("contents", className)}
-	{...restProps}
->
-	{@render children?.()}
+<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<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="drawer-portal"
+	class={cn("contents", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/drawer/drawer-title.svelte

@@ -1,20 +1,20 @@
-<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<HTMLHeadingElement>> = $props();
-</script>
-
-<h2
-	bind:this={ref}
-	data-slot="drawer-title"
-	class={cn("text-foreground text-base font-medium", className)}
-	{...restProps}
->
-	{@render children?.()}
+<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<HTMLHeadingElement>> = $props();
+</script>
+
+<h2
+	bind:this={ref}
+	data-slot="drawer-title"
+	class={cn("text-foreground text-base font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </h2>

package/dist/components/ui/drawer/drawer-trigger.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-	import { useDrawerContext } from "./drawer.svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		child,
-		onclick,
-		...restProps
-	}: HTMLButtonAttributes & {
-		children?: Snippet;
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		ref?: HTMLButtonElement | null;
-	} = $props();
-
-	const drawer = useDrawerContext();
-
-	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		onclick?.(event);
-		drawer.setOpen(true);
-	}
-
-	const triggerProps = $derived({
-		...restProps,
-		class: className,
-		"data-slot": "drawer-trigger",
-		"data-state": drawer.open ? "open" : "closed",
-		"aria-expanded": drawer.open,
-		type: "button" as const,
-		onclick: handleClick,
-	});
-</script>
-
-{#if child}
-	{@render child({ props: triggerProps })}
-{:else}
-	<button bind:this={ref} {...triggerProps}>
-		{@render children?.()}
-	</button>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { useDrawerContext } from "./drawer.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		onclick,
+		...restProps
+	}: HTMLButtonAttributes & {
+		children?: Snippet;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		ref?: HTMLButtonElement | null;
+	} = $props();
+
+	const drawer = useDrawerContext();
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		onclick?.(event);
+		drawer.setOpen(true);
+	}
+
+	const triggerProps = $derived({
+		...restProps,
+		class: className,
+		"data-slot": "drawer-trigger",
+		"data-state": drawer.open ? "open" : "closed",
+		"aria-expanded": drawer.open,
+		type: "button" as const,
+		onclick: handleClick,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: triggerProps })}
+{:else}
+	<button bind:this={ref} {...triggerProps}>
+		{@render children?.()}
+	</button>
 {/if}