@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

package/src/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -1,19 +1,31 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		align = "start",
+		alignOffset = -3,
+		portalProps,
 		...restProps
-	}: ContextMenuPrimitive.SubContentProps = $props();
+	}: ContextMenuPrimitive.SubContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+	} = $props();
 </script>
 
-<ContextMenuPrimitive.SubContent
-	bind:ref
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
-		className
-	)}
-	{...restProps}
-/>
+<ContextMenuPortal {...portalProps}>
+	<ContextMenuPrimitive.SubContent
+		bind:ref
+		data-slot="context-menu-sub-content"
+		{align}
+		{alignOffset}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</ContextMenuPortal>

package/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { cn } from "../../../utils";
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithoutChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		children,
 		inset,
+		children,
 		...restProps
 	}: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
 		inset?: boolean;
@@ -16,13 +16,14 @@
 
 <ContextMenuPrimitive.SubTrigger
 	bind:ref
+	data-slot="context-menu-sub-trigger"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-		inset && "pl-8",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto size-4" />
+	<ChevronRightIcon class="cn-rtl-flip ml-auto" />
 </ContextMenuPrimitive.SubTrigger>

package/src/lib/components/ui/context-menu/context-menu-sub.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />

package/src/lib/components/ui/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger
+	bind:ref
+	data-slot="context-menu-trigger"
+	class={cn("select-none", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/context-menu/context-menu.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />

package/src/lib/components/ui/context-menu/index.ts

@@ -1,32 +1,33 @@
-import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-
-import Item from "./context-menu-item.svelte";
-import GroupHeading from "./context-menu-group-heading.svelte";
+import CheckboxItem from "./context-menu-checkbox-item.svelte";
 import Content from "./context-menu-content.svelte";
-import Shortcut from "./context-menu-shortcut.svelte";
+import GroupHeading from "./context-menu-group-heading.svelte";
+import Group from "./context-menu-group.svelte";
+import Item from "./context-menu-item.svelte";
+import Label from "./context-menu-label.svelte";
+import Portal from "./context-menu-portal.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
 import RadioItem from "./context-menu-radio-item.svelte";
 import Separator from "./context-menu-separator.svelte";
+import Shortcut from "./context-menu-shortcut.svelte";
 import SubContent from "./context-menu-sub-content.svelte";
 import SubTrigger from "./context-menu-sub-trigger.svelte";
-import CheckboxItem from "./context-menu-checkbox-item.svelte";
-
-const Sub: typeof ContextMenuPrimitive.Sub = ContextMenuPrimitive.Sub;
-const Root: typeof ContextMenuPrimitive.Root = ContextMenuPrimitive.Root;
-const Trigger: typeof ContextMenuPrimitive.Trigger = ContextMenuPrimitive.Trigger;
-const Group: typeof ContextMenuPrimitive.Group = ContextMenuPrimitive.Group;
-const RadioGroup: typeof ContextMenuPrimitive.RadioGroup = ContextMenuPrimitive.RadioGroup;
+import Sub from "./context-menu-sub.svelte";
+import Trigger from "./context-menu-trigger.svelte";
+import Root from "./context-menu.svelte";
 
 export {
-	Sub,
 	Root,
+	Sub,
+	Portal,
 	Item,
+	GroupHeading,
+	Label,
 	Group,
 	Trigger,
 	Content,
 	Shortcut,
 	Separator,
 	RadioItem,
-	GroupHeading,
 	SubContent,
 	SubTrigger,
 	RadioGroup,
@@ -34,16 +35,18 @@ export {
 	//
 	Root as ContextMenu,
 	Sub as ContextMenuSub,
+	Portal as ContextMenuPortal,
 	Item as ContextMenuItem,
+	GroupHeading as ContextMenuGroupHeading,
 	Group as ContextMenuGroup,
 	Content as ContextMenuContent,
 	Trigger as ContextMenuTrigger,
 	Shortcut as ContextMenuShortcut,
 	RadioItem as ContextMenuRadioItem,
 	Separator as ContextMenuSeparator,
-	GroupHeading as ContextMenuGroupHeading,
 	RadioGroup as ContextMenuRadioGroup,
 	SubContent as ContextMenuSubContent,
 	SubTrigger as ContextMenuSubTrigger,
 	CheckboxItem as ContextMenuCheckboxItem,
+	Label as ContextMenuLabel,
 };

package/src/lib/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />

package/src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,38 +1,48 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import X from "@lucide/svelte/icons/x";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from '@lucide/svelte/icons/x';
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import DialogOverlay from "./dialog-overlay.svelte";
+	import DialogPortal from "./dialog-portal.svelte";
 	import type { Snippet } from "svelte";
-	import * as Dialog from "./index.js";
-	import { cn } from "../../../utils";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		portalProps,
 		children,
+		showCloseButton = true,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-		portalProps?: DialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
+		showCloseButton?: boolean;
 	} = $props();
 </script>
 
-<Dialog.Portal {...portalProps}>
-	<Dialog.Overlay />
+<DialogPortal {...portalProps}>
+	<DialogOverlay />
 	<DialogPrimitive.Content
 		bind:ref
+		data-slot="dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%_-_2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
-		>
-			<X class="size-4" />
-			<span class="sr-only">Close</span>
-		</DialogPrimitive.Close>
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
 	</DialogPrimitive.Content>
-</Dialog.Portal>
+</DialogPortal>

package/src/lib/components/ui/dialog/dialog-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,7 @@
 
 <DialogPrimitive.Description
 	bind:ref
-	class={cn("text-muted-foreground text-sm", className)}
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
 	{...restProps}
 />

package/src/lib/components/ui/dialog/dialog-footer.svelte

@@ -1,20 +1,32 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		showCloseButton = false,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
 </script>
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="dialog-footer"
+	class={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
 </div>

package/src/lib/components/ui/dialog/dialog-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	data-slot="dialog-header"
+	class={cn("gap-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,9 +11,7 @@
 
 <DialogPrimitive.Overlay
 	bind:ref
-	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
-		className
-	)}
+	data-slot="dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
 	{...restProps}
 />

package/src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />

package/src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,7 @@
 
 <DialogPrimitive.Title
 	bind:ref
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	data-slot="dialog-title"
+	class={cn("text-base leading-none font-medium", className)}
 	{...restProps}
 />

package/src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />

package/src/lib/components/ui/dialog/dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

package/src/lib/components/ui/dialog/index.ts

@@ -1,16 +1,13 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
-
-import Title from "./dialog-title.svelte";
+import Close from "./dialog-close.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
 import Footer from "./dialog-footer.svelte";
 import Header from "./dialog-header.svelte";
 import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
-
-const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root;
-const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger;
-const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close;
-const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal;
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Root from "./dialog.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/drawer/drawer-close.svelte

@@ -0,0 +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} />

package/src/lib/components/ui/drawer/drawer-content.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/components/utils.js";
+	import type { WithoutChildrenOrChild } from "$lib/components/utils.js";
 	import DrawerOverlay from "./drawer-overlay.svelte";
-	import { cn } from "../../../utils";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -10,21 +13,24 @@
 		children,
 		...restProps
 	}: DrawerPrimitive.ContentProps & {
-		portalProps?: DrawerPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
 	} = $props();
 </script>
 
-<DrawerPrimitive.Portal {...portalProps}>
+<DrawerPortal {...portalProps}>
 	<DrawerOverlay />
 	<DrawerPrimitive.Content
 		bind:ref
+		data-slot="drawer-content"
 		class={cn(
-			"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+			"bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b group/drawer-content fixed z-50 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]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-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",
 			className
 		)}
 		{...restProps}
 	>
-		<div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
+		<div
+			class="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+		></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>
-</DrawerPrimitive.Portal>
+</DrawerPortal>

package/src/lib/components/ui/drawer/drawer-description.svelte

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

package/src/lib/components/ui/drawer/drawer-footer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { cn } from "../../../utils";
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -9,10 +8,13 @@
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	export { className as class };
 </script>
 
-<div bind:this={ref} class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
+<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/src/lib/components/ui/drawer/drawer-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,11 @@
 
 <div
 	bind:this={ref}
-	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	data-slot="drawer-header"
+	class={cn(
+		"gap-0.5 p-4 md:gap-0.5 md:text-left flex flex-col group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/drawer/drawer-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,10 @@
 
 <DrawerPrimitive.Overlay
 	bind:ref
-	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	data-slot="drawer-overlay"
+	class={cn(
+		"bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+		className
+	)}
 	{...restProps}
 />

package/src/lib/components/ui/drawer/drawer-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ...restProps }: DrawerPrimitive.PortalProps = $props();
+</script>
+
+<DrawerPrimitive.Portal {...restProps} />

package/src/lib/components/ui/drawer/drawer-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,7 @@
 
 <DrawerPrimitive.Title
 	bind:ref
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	data-slot="drawer-title"
+	class={cn("text-foreground text-base font-medium", className)}
 	{...restProps}
 />

package/src/lib/components/ui/drawer/drawer-trigger.svelte

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

package/src/lib/components/ui/drawer/index.ts

@@ -1,17 +1,14 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
-
-import Root from "./drawer.svelte";
+import Close from "./drawer-close.svelte";
 import Content from "./drawer-content.svelte";
 import Description from "./drawer-description.svelte";
-import Overlay from "./drawer-overlay.svelte";
 import Footer from "./drawer-footer.svelte";
 import Header from "./drawer-header.svelte";
-import Title from "./drawer-title.svelte";
 import NestedRoot from "./drawer-nested.svelte";
-
-const Trigger: typeof DrawerPrimitive.Trigger = DrawerPrimitive.Trigger;
-const Portal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;
-const Close: typeof DrawerPrimitive.Close = DrawerPrimitive.Close;
+import Overlay from "./drawer-overlay.svelte";
+import Portal from "./drawer-portal.svelte";
+import Title from "./drawer-title.svelte";
+import Trigger from "./drawer-trigger.svelte";
+import Root from "./drawer.svelte";
 
 export {
 	Root,
@@ -25,6 +22,7 @@ export {
 	Trigger,
 	Portal,
 	Close,
+
 	//
 	Root as Drawer,
 	NestedRoot as DrawerNestedRoot,