negodesign 0.0.1 → 0.0.2

package/dist/components/ui/chart/chart-tooltip.svelte

@@ -1,184 +1,184 @@
-<script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
-	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
-	import type { Snippet } from "svelte";
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
-		return `${value}`;
-	}
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		hideLabel = false,
-		indicator = "dot",
-		hideIndicator = false,
-		labelKey,
-		label,
-		labelFormatter = defaultFormatter,
-		labelClassName,
-		formatter,
-		nameKey,
-		color,
-		...restProps
-	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
-		hideLabel?: boolean;
-		label?: string;
-		indicator?: "line" | "dot" | "dashed";
-		nameKey?: string;
-		labelKey?: string;
-		hideIndicator?: boolean;
-		labelClassName?: string;
-		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
-		formatter?: Snippet<
-			[
-				{
-					value: unknown;
-					name: string;
-					item: TooltipPayload;
-					index: number;
-					payload: TooltipPayload[];
-				},
-			]
-		>;
-	} = $props();
-
-	const chart = useChart();
-	const chartCtx = getChartContext();
-
-	// Filter to series with defined values (important for item-based charts like Pie/Arc
-	// where only the hovered item has a value)
-	const visibleSeries = $derived(
-		chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined)
-	);
-
-	const formattedLabel = $derived.by(() => {
-		if (hideLabel || !visibleSeries?.length) return null;
-
-		const [item] = visibleSeries;
-		const tooltipData = chartCtx.tooltip.data;
-
-		// Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
-		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
-
-		const key = labelKey ?? item?.label ?? item?.key ?? "value";
-		const itemConfig = getPayloadConfigFromPayload(
-			chart.config,
-			item,
-			key,
-			tooltipData as Record<string, unknown> | null
-		);
-
-		let value: unknown;
-		if (!labelKey && typeof label === "string") {
-			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
-		} else if (labelKey) {
-			value = itemConfig?.label ?? dataLabel;
-		} else {
-			value = dataLabel;
-		}
-
-		if (value === undefined) return null;
-		if (!labelFormatter) return value;
-		return labelFormatter(value, visibleSeries);
-	});
-
-	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== "dot");
-</script>
-
-{#snippet TooltipLabel()}
-	{#if formattedLabel}
-		<div class={cn("font-medium", labelClassName)}>
-			{#if typeof formattedLabel === "function"}
-				{@render formattedLabel()}
-			{:else}
-				{formattedLabel}
-			{/if}
-		</div>
-	{/if}
-{/snippet}
-
-<TooltipPrimitive.Root variant="none">
-	<div
-		bind:this={ref}
-		class={cn(
-			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-			className
-		)}
-		{...restProps}
-	>
-		{#if !nestLabel}
-			{@render TooltipLabel()}
-		{/if}
-		<div class="grid gap-1.5">
-			{#each visibleSeries as item, i (item.key + i)}
-				{@const key = `${nameKey || item.key || item.label || "value"}`}
-				{@const itemConfig = getPayloadConfigFromPayload(
-					chart.config,
-					item,
-					key,
-					chartCtx.tooltip.data
-				)}
-				{@const indicatorColor = color || item.config?.color || item.color}
-				<div
-					class={cn(
-						"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
-						indicator === "dot" && "items-center"
-					)}
-				>
-					{#if formatter && item.value !== undefined && item.label}
-						{@render formatter({
-							value: item.value,
-							name: item.label,
-							item,
-							index: i,
-							payload: visibleSeries,
-						})}
-					{:else}
-						{#if itemConfig?.icon}
-							<itemConfig.icon />
-						{:else if !hideIndicator}
-							<div
-								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
-								class={cn(
-									"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-									{
-										"size-2.5": indicator === "dot",
-										"h-full w-1": indicator === "line",
-										"w-0 border-[1.5px] border-dashed bg-transparent":
-											indicator === "dashed",
-										"my-0.5": nestLabel && indicator === "dashed",
-									}
-								)}
-							></div>
-						{/if}
-						<div
-							class={cn(
-								"flex flex-1 shrink-0 justify-between leading-none",
-								nestLabel ? "items-end" : "items-center"
-							)}
-						>
-							<div class="grid gap-1.5">
-								{#if nestLabel}
-									{@render TooltipLabel()}
-								{/if}
-								<span class="text-muted-foreground">
-									{itemConfig?.label || item.label}
-								</span>
-							</div>
-							{#if item.value !== undefined}
-								<span class="text-foreground font-mono font-medium tabular-nums">
-									{item.value.toLocaleString()}
-								</span>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			{/each}
-		</div>
-	</div>
-</TooltipPrimitive.Root>
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
+	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
+	import type { Snippet } from "svelte";
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+		return `${value}`;
+	}
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		hideLabel = false,
+		indicator = "dot",
+		hideIndicator = false,
+		labelKey,
+		label,
+		labelFormatter = defaultFormatter,
+		labelClassName,
+		formatter,
+		nameKey,
+		color,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		hideLabel?: boolean;
+		label?: string;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+		hideIndicator?: boolean;
+		labelClassName?: string;
+		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+		formatter?: Snippet<
+			[
+				{
+					value: unknown;
+					name: string;
+					item: TooltipPayload;
+					index: number;
+					payload: TooltipPayload[];
+				},
+			]
+		>;
+	} = $props();
+
+	const chart = useChart();
+	const chartCtx = getChartContext();
+
+	// Filter to series with defined values (important for item-based charts like Pie/Arc
+	// where only the hovered item has a value)
+	const visibleSeries = $derived(
+		chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined)
+	);
+
+	const formattedLabel = $derived.by(() => {
+		if (hideLabel || !visibleSeries?.length) return null;
+
+		const [item] = visibleSeries;
+		const tooltipData = chartCtx.tooltip.data;
+
+		// Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
+		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
+
+		const key = labelKey ?? item?.label ?? item?.key ?? "value";
+		const itemConfig = getPayloadConfigFromPayload(
+			chart.config,
+			item,
+			key,
+			tooltipData as Record<string, unknown> | null
+		);
+
+		let value: unknown;
+		if (!labelKey && typeof label === "string") {
+			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
+		} else if (labelKey) {
+			value = itemConfig?.label ?? dataLabel;
+		} else {
+			value = dataLabel;
+		}
+
+		if (value === undefined) return null;
+		if (!labelFormatter) return value;
+		return labelFormatter(value, visibleSeries);
+	});
+
+	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== "dot");
+</script>
+
+{#snippet TooltipLabel()}
+	{#if formattedLabel}
+		<div class={cn("font-medium", labelClassName)}>
+			{#if typeof formattedLabel === "function"}
+				{@render formattedLabel()}
+			{:else}
+				{formattedLabel}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+	<div
+		bind:this={ref}
+		class={cn(
+			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+			className
+		)}
+		{...restProps}
+	>
+		{#if !nestLabel}
+			{@render TooltipLabel()}
+		{/if}
+		<div class="grid gap-1.5">
+			{#each visibleSeries as item, i (item.key + i)}
+				{@const key = `${nameKey || item.key || item.label || "value"}`}
+				{@const itemConfig = getPayloadConfigFromPayload(
+					chart.config,
+					item,
+					key,
+					chartCtx.tooltip.data
+				)}
+				{@const indicatorColor = color || item.config?.color || item.color}
+				<div
+					class={cn(
+						"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
+						indicator === "dot" && "items-center"
+					)}
+				>
+					{#if formatter && item.value !== undefined && item.label}
+						{@render formatter({
+							value: item.value,
+							name: item.label,
+							item,
+							index: i,
+							payload: visibleSeries,
+						})}
+					{:else}
+						{#if itemConfig?.icon}
+							<itemConfig.icon />
+						{:else if !hideIndicator}
+							<div
+								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+								class={cn(
+									"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+									{
+										"size-2.5": indicator === "dot",
+										"h-full w-1": indicator === "line",
+										"w-0 border-[1.5px] border-dashed bg-transparent":
+											indicator === "dashed",
+										"my-0.5": nestLabel && indicator === "dashed",
+									}
+								)}
+							></div>
+						{/if}
+						<div
+							class={cn(
+								"flex flex-1 shrink-0 justify-between leading-none",
+								nestLabel ? "items-end" : "items-center"
+							)}
+						>
+							<div class="grid gap-1.5">
+								{#if nestLabel}
+									{@render TooltipLabel()}
+								{/if}
+								<span class="text-muted-foreground">
+									{itemConfig?.label || item.label}
+								</span>
+							</div>
+							{#if item.value !== undefined}
+								<span class="text-foreground font-mono font-medium tabular-nums">
+									{item.value.toLocaleString()}
+								</span>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</TooltipPrimitive.Root>

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { Tick02Icon } from '@hugeicons/core-free-icons';
-	import { MinusSignIcon } from '@hugeicons/core-free-icons';
-
-	let {
-		ref = $bindable(null),
-		checked = $bindable(false),
-		indeterminate = $bindable(false),
-		class: className,
-		...restProps
-	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
-</script>
-
-<CheckboxPrimitive.Root
-	bind:ref
-	data-slot="checkbox"
-	class={cn(
-		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:checked
-	bind:indeterminate
-	{...restProps}
->
-	{#snippet children({ checked, indeterminate })}
-		<div
-			data-slot="checkbox-indicator"
-			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
-		>
-			{#if checked}
-				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2}  />
-			{:else if indeterminate}
-				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2}  />
-			{/if}
-		</div>
-	{/snippet}
-</CheckboxPrimitive.Root>
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { Tick02Icon } from '@hugeicons/core-free-icons';
+	import { MinusSignIcon } from '@hugeicons/core-free-icons';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div
+			data-slot="checkbox-indicator"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+		>
+			{#if checked}
+				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2}  />
+			{:else if indeterminate}
+				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2}  />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

package/dist/components/ui/data-table/flex-render.svelte

@@ -1,40 +1,40 @@
-<script
-	lang="ts"
-	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
-	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
-	import type { Attachment } from "svelte/attachments";
-	type Props = {
-		/** The cell or header field of the current cell's column definition. */
-		content?: TContext extends HeaderContext<TData, TValue>
-			? ColumnDefTemplate<HeaderContext<TData, TValue>>
-			: TContext extends CellContext<TData, TValue>
-				? ColumnDefTemplate<CellContext<TData, TValue>>
-				: never;
-		/** The result of the `getContext()` function of the header or cell */
-		context: TContext;
-
-		/** Used to pass attachments that can't be gotten through context */
-		attach?: Attachment;
-	};
-
-	let { content, context, attach }: Props = $props();
-</script>
-
-{#if typeof content === "string"}
-	{content}
-{:else if content instanceof Function}
-	<!-- It's unlikely that a CellContext will be passed to a Header -->
-	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-	{@const result = content(context as any)}
-	{#if result instanceof RenderComponentConfig}
-		{@const { component: Component, props } = result}
-		<Component {...props} {attach} />
-	{:else if result instanceof RenderSnippetConfig}
-		{@const { snippet, params } = result}
-		{@render snippet({ ...params, attach })}
-	{:else}
-		{result}
-	{/if}
-{/if}
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+	import type { Attachment } from "svelte/attachments";
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+
+		/** Used to pass attachments that can't be gotten through context */
+		attach?: Attachment;
+	};
+
+	let { content, context, attach }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} {attach} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet({ ...params, attach })}
+	{:else}
+		{result}
+	{/if}
+{/if}

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

@@ -1,7 +1,7 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-
-	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
-</script>
-
-<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
+</script>
+
+<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />

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

@@ -1,33 +1,33 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import DrawerPortal from "./drawer-portal.svelte";
-	import DrawerOverlay from "./drawer-overlay.svelte";
-	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		portalProps,
-		children,
-		...restProps
-	}: DrawerPrimitive.ContentProps & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
-	} = $props();
-</script>
-
-<DrawerPortal {...portalProps}>
-	<DrawerOverlay />
-	<DrawerPrimitive.Content
-		bind:ref
-		data-slot="drawer-content"
-		class={cn("before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", className)}
-		{...restProps}
-	>
-		<div
-			class="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
-		></div>
-		{@render children?.()}
-	</DrawerPrimitive.Content>
-</DrawerPortal>
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: DrawerPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+	} = $props();
+</script>
+
+<DrawerPortal {...portalProps}>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		bind:ref
+		data-slot="drawer-content"
+		class={cn("before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", className)}
+		{...restProps}
+	>
+		<div
+			class="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+		></div>
+		{@render children?.()}
+	</DrawerPrimitive.Content>
+</DrawerPortal>

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

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DrawerPrimitive.DescriptionProps = $props();
-</script>
-
-<DrawerPrimitive.Description
-	bind:ref
-	data-slot="drawer-description"
-	class={cn("text-muted-foreground text-sm", className)}
-	{...restProps}
-/>
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.DescriptionProps = $props();
+</script>
+
+<DrawerPrimitive.Description
+	bind:ref
+	data-slot="drawer-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>