compote-ui 0.30.2 → 0.31.1

package/dist/components/button/button.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { button, type ButtonVariant, type ButtonSize } from './button.variants';
+	import type { ClassValue } from 'tailwind-variants';
 
 	type Props = Omit<HTMLButtonAttributes, 'class'> & {
 		variant?: ButtonVariant;
 		size?: ButtonSize;
-		class?: string;
+		class?: ClassValue;
 	};
 
 	let { variant, size, class: className, children, ...rest }: Props = $props();

package/dist/components/button/button.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type ButtonVariant, type ButtonSize } from './button.variants';
+import type { ClassValue } from 'tailwind-variants';
 type Props = Omit<HTMLButtonAttributes, 'class'> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    class?: string;
+    class?: ClassValue;
 };
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/components/button/link-button.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { button, type ButtonVariant, type ButtonSize } from './button.variants';
+	import type { ClassValue } from 'tailwind-variants';
 
 	type Props = Omit<HTMLAnchorAttributes, 'class'> & {
 		variant?: ButtonVariant;
 		size?: ButtonSize;
-		class?: string;
+		class?: ClassValue;
 	};
 
 	let { variant, size, class: className, children, ...rest }: Props = $props();

package/dist/components/button/link-button.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 import { type ButtonVariant, type ButtonSize } from './button.variants';
+import type { ClassValue } from 'tailwind-variants';
 type Props = Omit<HTMLAnchorAttributes, 'class'> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    class?: string;
+    class?: ClassValue;
 };
 declare const LinkButton: import("svelte").Component<Props, {}, "">;
 type LinkButton = ReturnType<typeof LinkButton>;

package/dist/components/collapsible/collapsible-content.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Collapsible } from '@ark-ui/svelte/collapsible';
 	import type { CollapsibleContentBaseProps } from '@ark-ui/svelte/collapsible';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	interface Props extends CollapsibleContentBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

package/dist/components/collapsible/collapsible-content.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CollapsibleContentBaseProps } from '@ark-ui/svelte/collapsible';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends CollapsibleContentBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const CollapsibleContent: import("svelte").Component<Props, {}, "">;
 type CollapsibleContent = ReturnType<typeof CollapsibleContent>;

package/dist/components/collapsible/collapsible-indicator.svelte

@@ -4,9 +4,10 @@
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
 	import PhCaretRight from '../../icons/PhCaretRight.svelte';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends CollapsibleIndicatorBaseProps {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	}
 

package/dist/components/collapsible/collapsible-indicator.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { CollapsibleIndicatorBaseProps } from '@ark-ui/svelte/collapsible';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends CollapsibleIndicatorBaseProps {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 }
 declare const CollapsibleIndicator: import("svelte").Component<Props, {}, "">;

package/dist/components/collapsible/collapsible-root.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Collapsible } from '@ark-ui/svelte/collapsible';
 	import type { CollapsibleRootBaseProps } from '@ark-ui/svelte/collapsible';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	interface Props extends CollapsibleRootBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

package/dist/components/collapsible/collapsible-root.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CollapsibleRootBaseProps } from '@ark-ui/svelte/collapsible';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends CollapsibleRootBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const CollapsibleRoot: import("svelte").Component<Props, {}, "">;
 type CollapsibleRoot = ReturnType<typeof CollapsibleRoot>;

package/dist/components/collapsible/collapsible-trigger.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Collapsible } from '@ark-ui/svelte/collapsible';
 	import type { CollapsibleTriggerBaseProps } from '@ark-ui/svelte/collapsible';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	interface Props extends CollapsibleTriggerBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

package/dist/components/collapsible/collapsible-trigger.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CollapsibleTriggerBaseProps } from '@ark-ui/svelte/collapsible';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends CollapsibleTriggerBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const CollapsibleTrigger: import("svelte").Component<Props, {}, "">;
 type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;

package/dist/components/combobox/combobox.svelte

@@ -133,7 +133,7 @@
 	<Portal>
 		<Combobox.Positioner class="data-[state=closed]:pointer-events-none">
 			<Combobox.Content
-				class="data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-document p-1  shadow-md"
+				class="z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-document p-1 shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0  data-[state=open]:zoom-in-95"
 			>
 				{#if loading}
 					<div class="flex items-center justify-center py-4">

package/dist/components/dialog/alert-dialog.svelte

@@ -28,11 +28,11 @@
 <Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
 	<Portal>
 		<Dialog.Backdrop
-			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
+			class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
 		/>
 		<Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center">
 			<Dialog.Content
-				class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl"
+				class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
 			>
 				<Dialog.Title class="text-lg leading-none font-semibold tracking-tight">
 					{title}

package/dist/components/dialog/dialog-close-trigger.svelte

@@ -2,9 +2,10 @@
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
 	import { PhX } from '../../icons';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends DialogCloseTriggerBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

package/dist/components/dialog/dialog-close-trigger.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DialogCloseTriggerBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DialogCloseTrigger: import("svelte").Component<Props, {}, "">;
 type DialogCloseTrigger = ReturnType<typeof DialogCloseTrigger>;

package/dist/components/dialog/dialog-description.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import type { DialogDescriptionBaseProps } from '@ark-ui/svelte/dialog';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends DialogDescriptionBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

package/dist/components/dialog/dialog-description.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DialogDescriptionBaseProps } from '@ark-ui/svelte/dialog';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DialogDescriptionBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DialogDescription: import("svelte").Component<Props, {}, "">;
 type DialogDescription = ReturnType<typeof DialogDescription>;

package/dist/components/dialog/dialog-footer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props {
-		class?: string;
+		class?: ClassValue;
 		children: Snippet;
 	}
 

package/dist/components/dialog/dialog-footer.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 interface Props {
-    class?: string;
+    class?: ClassValue;
     children: Snippet;
 }
 declare const DialogFooter: import("svelte").Component<Props, {}, "">;

package/dist/components/dialog/{dialog.svelte → dialog-root.svelte}

@@ -17,12 +17,12 @@
 <Dialog.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
 	<Portal>
 		<Dialog.Backdrop
-			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
+			class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
 		/>
 		<Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center p-4">
 			<Dialog.Content
 				class={cn(
-					'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl',
+					'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 					contentClass
 				)}
 			>

package/dist/components/dialog/dialog-root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogProps } from './dialog.types';
+declare const DialogRoot: import("svelte").Component<DialogProps, {}, "open">;
+type DialogRoot = ReturnType<typeof DialogRoot>;
+export default DialogRoot;

package/dist/components/dialog/dialog-title.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import type { DialogTitleBaseProps } from '@ark-ui/svelte/dialog';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends DialogTitleBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

package/dist/components/dialog/dialog-title.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DialogTitleBaseProps } from '@ark-ui/svelte/dialog';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DialogTitleBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DialogTitle: import("svelte").Component<Props, {}, "">;
 type DialogTitle = ReturnType<typeof DialogTitle>;

package/dist/components/dialog/dialog-trigger.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import type { DialogTriggerBaseProps } from '@ark-ui/svelte/dialog';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends DialogTriggerBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

package/dist/components/dialog/dialog-trigger.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DialogTriggerBaseProps } from '@ark-ui/svelte/dialog';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DialogTriggerBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DialogTrigger: import("svelte").Component<Props, {}, "">;
 type DialogTrigger = ReturnType<typeof DialogTrigger>;

package/dist/components/dialog/dialog.types.d.ts

@@ -1,11 +1,12 @@
 import type { DialogRootBaseProps } from '@ark-ui/svelte/dialog';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 export type { DialogRootBaseProps };
 type DialogSharedProps = Pick<DialogRootBaseProps, 'closeOnEscape' | 'closeOnInteractOutside' | 'onOpenChange' | 'lazyMount' | 'unmountOnExit'>;
 export interface DialogProps extends DialogSharedProps {
     open: boolean;
     children: Snippet;
-    contentClass?: string;
+    contentClass?: ClassValue;
     initialFocusEl?: DialogRootBaseProps['initialFocusEl'];
 }
 export type AlertDialogVariant = 'default' | 'destructive';

package/dist/components/dialog/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Root } from './dialog.svelte';
+export { default as Root } from './dialog-root.svelte';
 export { default as Title } from './dialog-title.svelte';
 export { default as Description } from './dialog-description.svelte';
 export { default as Trigger } from './dialog-trigger.svelte';

package/dist/components/dialog/index.js

@@ -1,4 +1,4 @@
-export { default as Root } from './dialog.svelte';
+export { default as Root } from './dialog-root.svelte';
 export { default as Title } from './dialog-title.svelte';
 export { default as Description } from './dialog-description.svelte';
 export { default as Trigger } from './dialog-trigger.svelte';

package/dist/components/drawer/drawer-backdrop.svelte

@@ -1,40 +1,22 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerBackdropBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
 
 	interface Props extends DrawerBackdropBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, ...rest }: Props = $props();
 </script>
 
-<Drawer.Backdrop {...rest} class={className ?? 'fixed inset-0 z-50 bg-black/50'} />
-
-<style>
-	:global([data-scope='drawer'][data-part='backdrop'][data-state='open']) {
-		animation: fade-in 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-	}
-
-	:global([data-scope='drawer'][data-part='backdrop'][data-state='closed']) {
-		animation: fade-out 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
-	@keyframes fade-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	@keyframes fade-out {
-		from {
-			opacity: 1;
-		}
-		to {
-			opacity: 0;
-		}
-	}
-</style>
+<Drawer.Backdrop
+	{...rest}
+	class={cn(
+		'fixed inset-0 z-50 bg-black/50',
+		'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+		'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+		className
+	)}
+/>

package/dist/components/drawer/drawer-backdrop.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DrawerBackdropBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerBackdropBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerBackdrop: import("svelte").Component<Props, {}, "">;
 type DrawerBackdrop = ReturnType<typeof DrawerBackdrop>;

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerCloseTriggerBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends DrawerCloseTriggerBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
@@ -11,7 +12,6 @@
 
 <Drawer.CloseTrigger
 	{...rest}
-	onclick={() => console.log('Click:')}
 	class={className ??
 		'absolute top-12 right-4 flex h-7 w-7 cursor-pointer items-center justify-center rounded border-none bg-transparent text-ink-dim hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-[-1px]'}
 >

package/dist/components/drawer/drawer-close-trigger.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DrawerCloseTriggerBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerCloseTriggerBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerCloseTrigger: import("svelte").Component<Props, {}, "">;
 type DrawerCloseTrigger = ReturnType<typeof DrawerCloseTrigger>;

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

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerContentBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
 
 	interface Props extends DrawerContentBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
@@ -11,8 +13,13 @@
 
 <Drawer.Content
 	{...rest}
-	class={className ??
-		'relative flex h-full max-h-[96svh] w-full flex-col rounded-t-2xl bg-surface-1 px-5 shadow-xl outline-none data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:rounded-r-2xl data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:rounded-l-2xl data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:rounded-b-2xl'}
+	class={cn(
+		'relative flex h-full max-h-[96svh] w-full flex-col rounded-t-2xl bg-surface-1 px-5 shadow-xl outline-none',
+		'data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:rounded-r-2xl',
+		'data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:rounded-l-2xl',
+		'data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:rounded-b-2xl',
+		className
+	)}
 >
 	{@render children?.()}
 </Drawer.Content>

package/dist/components/drawer/drawer-content.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DrawerContentBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerContentBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerContent: import("svelte").Component<Props, {}, "">;
 type DrawerContent = ReturnType<typeof DrawerContent>;

package/dist/components/drawer/drawer-grabber-indicator.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerGrabberIndicatorBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
 
 	interface Props extends DrawerGrabberIndicatorBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, ...rest }: Props = $props();
 </script>
 
-<Drawer.GrabberIndicator {...rest} class={className ?? 'h-1 w-10 rounded-full bg-border'} />
+<Drawer.GrabberIndicator {...rest} class={cn('h-1 w-10 rounded-full bg-border', className)} />

package/dist/components/drawer/drawer-grabber-indicator.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DrawerGrabberIndicatorBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerGrabberIndicatorBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerGrabberIndicator: import("svelte").Component<Props, {}, "">;
 type DrawerGrabberIndicator = ReturnType<typeof DrawerGrabberIndicator>;

package/dist/components/drawer/drawer-grabber.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerGrabberBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
 
 	interface Props extends DrawerGrabberBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
@@ -11,8 +13,10 @@
 
 <Drawer.Grabber
 	{...rest}
-	class={className ??
-		'flex w-full shrink-0 cursor-grab touch-none items-center justify-center py-5 select-none active:cursor-grabbing'}
+	class={cn(
+		'flex w-full shrink-0 cursor-grab touch-none items-center justify-center py-5 select-none active:cursor-grabbing',
+		className
+	)}
 >
 	{@render children?.()}
 </Drawer.Grabber>

package/dist/components/drawer/drawer-grabber.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DrawerGrabberBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerGrabberBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerGrabber: import("svelte").Component<Props, {}, "">;
 type DrawerGrabber = ReturnType<typeof DrawerGrabber>;

package/dist/components/drawer/drawer-positioner.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerPositionerBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
 
 	interface Props extends DrawerPositionerBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
@@ -11,8 +13,13 @@
 
 <Drawer.Positioner
 	{...rest}
-	class={className ??
-		'fixed inset-0 z-50 flex items-end justify-center data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end data-[swipe-direction=up]:items-start'}
+	class={cn(
+		'fixed inset-0 z-50 flex items-end justify-center',
+		'data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start',
+		'data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end',
+		'data-[swipe-direction=up]:items-start',
+		className
+	)}
 >
 	{@render children?.()}
 </Drawer.Positioner>

package/dist/components/drawer/drawer-positioner.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DrawerPositionerBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerPositionerBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerPositioner: import("svelte").Component<Props, {}, "">;
 type DrawerPositioner = ReturnType<typeof DrawerPositioner>;

package/dist/components/drawer/drawer-root.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
-	import type { DrawerRootProps, DrawerOpenChangeDetails } from '@ark-ui/svelte/drawer';
+	import type { DrawerRootProps } from '@ark-ui/svelte/drawer';
 
 	interface Props extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
 		open?: boolean;
 	}
 
 	let { children, open = $bindable(), ...rest }: Props = $props();
-
-	const handleOpenChange = (details: DrawerOpenChangeDetails) => {
-		open = details.open;
-	};
 </script>
 
-<Drawer.Root {open} onOpenChange={handleOpenChange} {...rest}>
+<Drawer.Root bind:open {...rest}>
 	{@render children?.()}
 </Drawer.Root>

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

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerTitleBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
 
 	interface Props extends DrawerTitleBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<Drawer.Title {...rest} class={className ?? 'mb-2 text-lg leading-7 font-medium text-ink'}>
+<Drawer.Title {...rest} class={cn('mb-2 text-lg leading-7 font-medium text-ink', className)}>
 	{@render children?.()}
 </Drawer.Title>