compote-ui 0.31.0 → 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}

@@ -1,33 +1,33 @@
-<script lang="ts">
-	import { Dialog } from '@ark-ui/svelte/dialog';
-	import { Portal } from '@ark-ui/svelte/portal';
-	import { cn } from 'tailwind-variants';
-	import type { DialogProps } from './dialog.types';
-
-	let {
-		open = $bindable(),
-		children,
-		contentClass,
-		lazyMount = true,
-		unmountOnExit = true,
-		...restProps
-	}: DialogProps = $props();
-</script>
-
-<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"
-		/>
-		<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',
-					contentClass
-				)}
-			>
-				{@render children()}
-			</Dialog.Content>
-		</Dialog.Positioner>
-	</Portal>
-</Dialog.Root>
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { cn } from 'tailwind-variants';
+	import type { DialogProps } from './dialog.types';
+
+	let {
+		open = $bindable(),
+		children,
+		contentClass,
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: DialogProps = $props();
+</script>
+
+<Dialog.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
+	<Portal>
+		<Dialog.Backdrop
+			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(
+					'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
+				)}
+			>
+				{@render children()}
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>

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>

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

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

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

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

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

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

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

@@ -1,30 +1,31 @@
 import type { Snippet } from 'svelte';
 import type { FieldRootBaseProps, FieldLabelBaseProps, FieldInputProps as ArkFieldInputProps, FieldTextareaProps as ArkFieldTextareaProps, FieldHelperTextBaseProps, FieldErrorTextBaseProps } from '@ark-ui/svelte/field';
+import type { ClassValue } from 'svelte/elements';
 export interface FormAdapter {
     invalid(field: string): boolean;
     isRequired(field: string): boolean;
     errors: Record<string, string[]>;
 }
 export interface FieldRootProps extends FieldRootBaseProps {
-    class?: string;
+    class?: ClassValue;
     form?: FormAdapter;
     field?: string;
     helperText?: string;
 }
 export interface FieldLabelProps extends FieldLabelBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldInputProps extends ArkFieldInputProps {
-    class?: string;
+    class?: ClassValue;
     startIcon?: Snippet;
     endIcon?: Snippet;
 }
 export interface FieldTextareaProps extends ArkFieldTextareaProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldHelperTextProps extends FieldHelperTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldErrorTextProps extends FieldErrorTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }

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

@@ -1,13 +1,14 @@
 import type { FieldsetRootBaseProps, FieldsetLegendBaseProps, FieldsetHelperTextBaseProps, FieldsetErrorTextBaseProps } from '@ark-ui/svelte/fieldset';
+import type { ClassValue } from 'svelte/elements';
 export interface FieldsetRootProps extends FieldsetRootBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldsetLegendProps extends FieldsetLegendBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldsetHelperTextProps extends FieldsetHelperTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldsetErrorTextProps extends FieldsetErrorTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }

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

@@ -5,9 +5,10 @@
 	import type { ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
 	import { getListboxContext } from './listbox-context';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = ListboxContentBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		items?: Snippet<[{ items: ListItem[]; group: [string, ListItem[]][] }]>;
 	};
 

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

@@ -1,8 +1,9 @@
 import type { ListboxContentBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
 import type { ListItem } from '../../utils/collections';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxContentBaseProps & {
-    class?: string;
+    class?: ClassValue;
     items?: Snippet<[{
         items: ListItem[];
         group: [string, ListItem[]][];

package/dist/components/listbox/listbox-empty.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxEmptyBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxEmptyBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-empty.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxEmptyBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxEmptyBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxEmpty: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-input.svelte

@@ -3,9 +3,10 @@
 	import type { ListboxInputBaseProps } from '@ark-ui/svelte/listbox';
 	import { cn } from 'tailwind-variants';
 	import { getListboxContext } from './listbox-context';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = ListboxInputBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		placeholder?: string;
 		oninput?: (event: Event & { currentTarget: HTMLInputElement }) => void;
 	};

package/dist/components/listbox/listbox-input.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ListboxInputBaseProps } from '@ark-ui/svelte/listbox';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxInputBaseProps & {
-    class?: string;
+    class?: ClassValue;
     placeholder?: string;
     oninput?: (event: Event & {
         currentTarget: HTMLInputElement;

package/dist/components/listbox/listbox-item-group-label.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemGroupLabelBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemGroupLabelBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item-group-label.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemGroupLabelBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemGroupLabelBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemGroupLabel: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-item-group.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemGroupBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemGroupBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item-group.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemGroupBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemGroupBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-item-indicator.svelte

@@ -4,9 +4,10 @@
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
 	import { PhCheck } from '../../icons';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = ListboxItemIndicatorBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item-indicator.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemIndicatorBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemIndicatorBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemIndicator: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-item-text.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemTextBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemTextBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item-text.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemTextBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemTextBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemText: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-item.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItem: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-label.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxLabelBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxLabelBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-label.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxLabelBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxLabelBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxLabel: import("svelte").Component<Props, {}, "">;

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

@@ -7,12 +7,13 @@
 	import type { ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
 	import { setListboxContext } from './listbox-context';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = Omit<ListboxRootBaseProps<ListItem<T>>, 'collection' | 'value'> & {
 		items: ListItem<T>[];
 		value?: T[];
 		name?: string;
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

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

@@ -1,12 +1,13 @@
 import { Listbox } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
 import type { ListItem } from '../../utils/collections';
+import type { ClassValue } from 'svelte/elements';
 declare function $$render<T extends string | number = string>(): {
     props: Omit<Listbox.RootBaseProps<ListItem<T>>, "value" | "collection"> & {
         items: ListItem<T>[];
         value?: T[];
         name?: string;
-        class?: string;
+        class?: ClassValue;
         children?: Snippet;
     };
     exports: {};

package/dist/components/listbox/listbox-value-text.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxValueTextBaseProps } from '@ark-ui/svelte/listbox';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxValueTextBaseProps & {
-		class?: string;
+		class?: ClassValue;
 	};
 
 	let { class: className, ...restProps }: Props = $props();

package/dist/components/listbox/listbox-value-text.svelte.d.ts

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

package/dist/components/select/select.svelte

@@ -65,7 +65,7 @@
 	<Portal>
 		<Select.Positioner>
 			<Select.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 text-ink shadow-md"
+				class="z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-document p-1 text-ink 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"
 			>
 				<Select.ItemGroup>
 					{#each items as item (item.value)}

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

@@ -19,13 +19,13 @@
 		<Tooltip.Content
 			{...restProps}
 			class={cn(
-				'z-50 max-w-80 rounded-md border bg-surface-1 px-2.5 py-1.5 text-xs font-medium text-ink shadow-md outline-none [--arrow-background:var(--compote-surface-1)] [--arrow-size:10px]',
+				'z-50 max-w-80 rounded-md border bg-well px-2.5 py-1.5 text-xs font-medium text-ink shadow-md outline-none [--arrow-background:var(--compote-well)] [--arrow-size:10px]',
 				className
 			)}
 		>
 			{#if showArrow}
 				<Tooltip.Arrow>
-					<Tooltip.ArrowTip class="border-l border-t" />
+					<Tooltip.ArrowTip class="border-t border-l" />
 				</Tooltip.Arrow>
 			{/if}
 			{@render children()}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.31.0",
+	"version": "0.31.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -55,6 +55,7 @@
 		"svelte": "^5.55.4",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.4",
+		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.59.1",
 		"unplugin-icons": "^23.0.1",

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

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