compote-ui 0.26.0 → 0.28.0

package/dist/components/avatar/avatar.svelte

@@ -20,14 +20,21 @@
 			.toUpperCase();
 	}
 
-	let { src, alt, fallback, size = 'md', class: className, ...rest }: AvatarProps & { class?: string } = $props();
+	let {
+		src,
+		alt,
+		fallback,
+		size = 'md',
+		class: className,
+		...rest
+	}: AvatarProps & { class?: string } = $props();
 
 	const displayFallback = $derived(fallback ? getInitials(fallback) : '');
 </script>
 
 <Avatar.Root
 	class={cn(
-		'inline-flex items-center justify-center relative overflow-hidden rounded-full select-none shrink-0 bg-surface-2 font-medium text-ink',
+		'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-2 font-medium text-ink select-none',
 		sizeClasses[size],
 		className
 	)}
@@ -36,7 +43,7 @@
 	<Avatar.Image
 		{src}
 		{alt}
-		class="object-cover w-full h-full rounded-[inherit] data-[state=hidden]:hidden"
+		class="h-full w-full rounded-[inherit] object-cover data-[state=hidden]:hidden"
 	/>
 	<Avatar.Fallback class="data-[state=hidden]:hidden">
 		{displayFallback}

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

@@ -4,12 +4,14 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         default: string;
         outline: string;
         ghost: string;
+        destructive: string;
     };
     size: {
         sm: string;
         default: string;
         lg: string;
         icon: string;
+        "icon-xs": string;
         'icon-sm': string;
         'icon-lg': string;
     };
@@ -18,12 +20,14 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         default: string;
         outline: string;
         ghost: string;
+        destructive: string;
     };
     size: {
         sm: string;
         default: string;
         lg: string;
         icon: string;
+        "icon-xs": string;
         'icon-sm': string;
         'icon-lg': string;
     };
@@ -32,12 +36,14 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         default: string;
         outline: string;
         ghost: string;
+        destructive: string;
     };
     size: {
         sm: string;
         default: string;
         lg: string;
         icon: string;
+        "icon-xs": string;
         'icon-sm': string;
         'icon-lg': string;
     };

package/dist/components/button/button.variants.js

@@ -5,13 +5,15 @@ export const button = tv({
         variant: {
             default: 'bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80',
             outline: 'border text-ink hover:bg-surface-2',
-            ghost: 'text-ink hover:bg-surface-2'
+            ghost: 'text-ink hover:bg-surface-2',
+            destructive: 'bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80'
         },
         size: {
             sm: 'h-8 gap-1.5 px-2',
             default: 'h-9 gap-2 px-3',
             lg: 'h-10 gap-2.5 px-4',
             icon: 'size-9',
+            "icon-xs": "size-6",
             'icon-sm': 'size-8',
             'icon-lg': 'size-10'
         }

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Drawer } from '@ark-ui/svelte/drawer';
+	import type { DrawerBackdropBaseProps } from '@ark-ui/svelte/drawer';
+
+	interface Props extends DrawerBackdropBaseProps {
+		class?: string;
+	}
+
+	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>

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

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

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Drawer } from '@ark-ui/svelte/drawer';
+	import type { DrawerCloseTriggerBaseProps } from '@ark-ui/svelte/drawer';
+
+	interface Props extends DrawerCloseTriggerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<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]'}
+>
+	{@render children?.()}
+</Drawer.CloseTrigger>

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

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

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

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { Drawer } from '@ark-ui/svelte/drawer';
+	import type { DrawerContentBaseProps } from '@ark-ui/svelte/drawer';
+
+	interface Props extends DrawerContentBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<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'}
+>
+	{@render children?.()}
+</Drawer.Content>
+
+<style>
+	/* Bottom bleed pseudo-element so background extends below rounded corners */
+	:global([data-scope='drawer'][data-part='content'])::after {
+		content: '';
+		position: absolute;
+		bottom: -50px;
+		left: 0;
+		right: 0;
+		height: 50px;
+		background: inherit;
+	}
+
+	/* Slide animations for bottom drawer (default) */
+	:global(
+		[data-scope='drawer'][data-part='content']:not([data-swipe-direction])[data-state='open'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'][data-state='open']
+	) {
+		animation: slide-in-bottom 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content']:not([data-swipe-direction])[data-state='closed'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'][data-state='closed']
+	) {
+		animation: slide-out-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	/* Slide animations for top drawer */
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='up'][data-state='open']
+	) {
+		animation: slide-in-top 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='up'][data-state='closed']
+	) {
+		animation: slide-out-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	/* Slide animations for left drawer */
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'][data-state='open']
+	) {
+		animation: slide-in-left 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'][data-state='closed']
+	) {
+		animation: slide-out-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	/* Slide animations for right drawer */
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right'][data-state='open']
+	) {
+		animation: slide-in-right 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right'][data-state='closed']
+	) {
+		animation: slide-out-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	@keyframes slide-in-bottom {
+		from {
+			transform: translate3d(0, 100%, 0);
+		}
+		to {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+	}
+
+	@keyframes slide-out-bottom {
+		from {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+		to {
+			transform: translate3d(0, 100%, 0);
+		}
+	}
+
+	@keyframes slide-in-top {
+		from {
+			transform: translate3d(0, -100%, 0);
+		}
+		to {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+	}
+
+	@keyframes slide-out-top {
+		from {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+		to {
+			transform: translate3d(0, -100%, 0);
+		}
+	}
+
+	@keyframes slide-in-left {
+		from {
+			transform: translate3d(-100%, 0, 0);
+		}
+		to {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+	}
+
+	@keyframes slide-out-left {
+		from {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+		to {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+
+	@keyframes slide-in-right {
+		from {
+			transform: translate3d(100%, 0, 0);
+		}
+		to {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+	}
+
+	@keyframes slide-out-right {
+		from {
+			transform: translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0);
+		}
+		to {
+			transform: translate3d(100%, 0, 0);
+		}
+	}
+</style>

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer } from '@ark-ui/svelte/drawer';
+	import type { DrawerGrabberBaseProps } from '@ark-ui/svelte/drawer';
+
+	interface Props extends DrawerGrabberBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<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'}
+>
+	{@render children?.()}
+</Drawer.Grabber>

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

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer } from '@ark-ui/svelte/drawer';
+	import type { DrawerPositionerBaseProps } from '@ark-ui/svelte/drawer';
+
+	interface Props extends DrawerPositionerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<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'}
+>
+	{@render children?.()}
+</Drawer.Positioner>

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

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer } from '@ark-ui/svelte/drawer';
+	import type { DrawerRootProps, DrawerOpenChangeDetails } 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}>
+	{@render children?.()}
+</Drawer.Root>

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

@@ -0,0 +1,7 @@
+import type { DrawerRootProps } from '@ark-ui/svelte/drawer';
+interface Props extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
+    open?: boolean;
+}
+declare const DrawerRoot: import("svelte").Component<Props, {}, "open">;
+type DrawerRoot = ReturnType<typeof DrawerRoot>;
+export default DrawerRoot;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+export { default as Root } from './drawer-root.svelte';
+export { default as Trigger } from './drawer-trigger.svelte';
+export { default as Backdrop } from './drawer-backdrop.svelte';
+export { default as Positioner } from './drawer-positioner.svelte';
+export { default as Content } from './drawer-content.svelte';
+export { default as Grabber } from './drawer-grabber.svelte';
+export { default as GrabberIndicator } from './drawer-grabber-indicator.svelte';
+export { default as Title } from './drawer-title.svelte';
+export { default as CloseTrigger } from './drawer-close-trigger.svelte';

package/dist/components/drawer/index.js

@@ -0,0 +1,9 @@
+export { default as Root } from './drawer-root.svelte';
+export { default as Trigger } from './drawer-trigger.svelte';
+export { default as Backdrop } from './drawer-backdrop.svelte';
+export { default as Positioner } from './drawer-positioner.svelte';
+export { default as Content } from './drawer-content.svelte';
+export { default as Grabber } from './drawer-grabber.svelte';
+export { default as GrabberIndicator } from './drawer-grabber-indicator.svelte';
+export { default as Title } from './drawer-title.svelte';
+export { default as CloseTrigger } from './drawer-close-trigger.svelte';

package/dist/components/image-cropper/image-cropper.svelte

@@ -112,9 +112,7 @@
 				>
 					<PhArrowClockwise class="size-4" />
 				</Button>
-				<Button variant="outline" size="sm" onclick={handleTrim} disabled={trimming}>
-					Trim
-				</Button>
+				<Button variant="outline" size="sm" onclick={handleTrim} disabled={trimming}>Trim</Button>
 			</div>
 		</div>
 		<p>Width: {cropData.width}px / Height: {cropData.height}px</p>

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

@@ -1,4 +1,6 @@
 export { default as Root } from './tabs.svelte';
+export { default as List } from './tab-list.svelte';
 export { default as Trigger } from './tab-trigger.svelte';
+export { default as Indicator } from './tab-indicator.svelte';
 export { default as Content } from './tab-content.svelte';
 export type { TabsProps } from './types';

package/dist/components/tabs/index.js

@@ -1,3 +1,5 @@
 export { default as Root } from './tabs.svelte';
+export { default as List } from './tab-list.svelte';
 export { default as Trigger } from './tab-trigger.svelte';
+export { default as Indicator } from './tab-indicator.svelte';
 export { default as Content } from './tab-content.svelte';

package/dist/components/tabs/tab-content.svelte

@@ -12,7 +12,7 @@
 <Tabs.Content
 	{...rest}
 	class={className ??
-		'flex-1 pt-4 outline-none data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4'}
+		'flex-1 pt-4 outline-none focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4'}
 >
 	{@render children?.()}
 </Tabs.Content>

package/dist/components/tabs/tab-indicator.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs } from '@ark-ui/svelte/tabs';
+	import type { TabIndicatorBaseProps } from '@ark-ui/svelte/tabs';
+
+	interface Props extends TabIndicatorBaseProps {
+		class?: string;
+	}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<Tabs.Indicator
+	{...rest}
+	class={className ??
+		"absolute -z-10 rounded-md bg-surface-2 transition-[width,height,left,top] duration-200 ease-out data-[orientation='horizontal']:h-8 data-[orientation='horizontal']:w-(--width) data-[orientation='vertical']:h-(--height) data-[orientation='vertical']:w-full"}
+/>

package/dist/components/tabs/tab-indicator.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TabIndicatorBaseProps } from '@ark-ui/svelte/tabs';
+interface Props extends TabIndicatorBaseProps {
+    class?: string;
+}
+declare const TabIndicator: import("svelte").Component<Props, {}, "">;
+type TabIndicator = ReturnType<typeof TabIndicator>;
+export default TabIndicator;

package/dist/components/tabs/tab-list.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Tabs } from '@ark-ui/svelte/tabs';
+	import type { TabListBaseProps } from '@ark-ui/svelte/tabs';
+
+	interface Props extends TabListBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Tabs.List
+	{...rest}
+	class={className ??
+		"relative isolate inline-flex gap-1 data-[orientation='horizontal']:flex-row data-[orientation='vertical']:flex-col"}
+>
+	{@render children?.()}
+</Tabs.List>

package/dist/components/tabs/tab-list.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TabListBaseProps } from '@ark-ui/svelte/tabs';
+interface Props extends TabListBaseProps {
+    class?: string;
+}
+declare const TabList: import("svelte").Component<Props, {}, "">;
+type TabList = ReturnType<typeof TabList>;
+export default TabList;

package/dist/components/tabs/tab-trigger.svelte

@@ -12,7 +12,7 @@
 <Tabs.Trigger
 	{...rest}
 	class={className ??
-		'inline-flex h-8 items-center justify-center gap-2 rounded-md bg-transparent px-3 text-sm whitespace-nowrap text-ink-dim transition-colors outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 data-selected:font-medium data-selected:text-ink data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:py-2'}
+		'inline-flex h-8 items-center justify-center gap-2 rounded-md bg-transparent px-3 text-sm whitespace-nowrap text-ink-dim transition-colors outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:grayscale data-selected:font-medium data-selected:text-ink data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:py-2'}
 >
 	{@render children?.()}
 </Tabs.Trigger>

package/dist/components/tabs/tabs.svelte

@@ -4,11 +4,9 @@
 	import type { TabsProps } from './types';
 
 	let {
-		indicator = false,
 		value = $bindable(),
 		defaultValue,
 		orientation = 'horizontal',
-		triggers,
 		children,
 		...rootProps
 	}: TabsProps = $props();
@@ -22,18 +20,6 @@
 		{orientation}
 		class="flex data-[orientation='horizontal']:flex-col data-[orientation='vertical']:flex-row"
 	>
-		<Tabs.List
-			class="relative isolate inline-flex gap-1 data-[orientation='horizontal']:flex-row data-[orientation='vertical']:flex-col"
-		>
-			{#if triggers}
-				{@render triggers()}
-			{/if}
-			{#if indicator}
-				<Tabs.Indicator
-					class="absolute -z-10 rounded-md bg-surface-2 transition-[width,height,left,top] duration-200 ease-out data-[orientation='horizontal']:h-8 data-[orientation='horizontal']:w-(--width) data-[orientation='vertical']:h-(--height) data-[orientation='vertical']:w-full"
-				/>
-			{/if}
-		</Tabs.List>
 		{@render children?.()}
 	</Tabs.Root>
 </ClientOnly>

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

@@ -1,5 +1,4 @@
 import { Tabs } from '@ark-ui/svelte/tabs';
-import type { TabsProps } from './types';
-declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+declare const Tabs: import("svelte").Component<Tabs.RootBaseProps, {}, "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

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

@@ -1,8 +1,2 @@
 import type { TabsRootBaseProps } from '@ark-ui/svelte/tabs';
-import type { Snippet } from 'svelte';
-export interface TabsProps extends TabsRootBaseProps {
-    /** Whether to show the animated indicator behind the active tab */
-    indicator?: boolean;
-    /** Snippet for rendering tab triggers inside the list */
-    triggers?: Snippet;
-}
+export type TabsProps = TabsRootBaseProps;

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

@@ -1,18 +1,21 @@
-<script lang="ts">
-	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
-	import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
-	import { cn } from 'tailwind-variants';
-
-	interface Props extends ToggleGroupItemBaseProps {
-		class?: string;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<ToggleGroup.Item
-	{...rest}
-	class={cn('inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm', className)}
->
-	{@render children?.()}
-</ToggleGroup.Item>
+<script lang="ts">
+	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
+	import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ToggleGroupItemBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ToggleGroup.Item
+	{...rest}
+	class={cn(
+		'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Item>

package/dist/components/toggle-group/toggle-group.svelte

@@ -1,19 +1,22 @@
-<script lang="ts">
-	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
-	import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
-	import { cn } from 'tailwind-variants';
-
-	interface Props extends ToggleGroupRootBaseProps {
-		class?: string;
-	}
-
-	let { class: className, children, value = $bindable(), ...rootProps }: Props = $props();
-</script>
-
-<ToggleGroup.Root
-	{...rootProps}
-	bind:value
-	class={cn('inline-flex gap-1 rounded-lg border border-border bg-surface-1 p-1 data-[orientation=vertical]:flex-col', className)}
->
-	{@render children?.()}
-</ToggleGroup.Root>
+<script lang="ts">
+	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
+	import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ToggleGroupRootBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, value = $bindable(), ...rootProps }: Props = $props();
+</script>
+
+<ToggleGroup.Root
+	{...rootProps}
+	bind:value
+	class={cn(
+		'inline-flex gap-1 rounded-lg border border-border bg-surface-1 p-1 data-[orientation=vertical]:flex-col',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Root>

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as Combobox } from './components/combobox/combobox.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
 export type { DialogProps, AlertDialogProps } from './components/dialog/dialog.types';
+export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';
 export type { FileUploadProps, FileUploadFileChangeDetails, FileType } from './components/file-upload/types';

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as CheckboxGroup } from './components/checkbox/checkbox-group.s
 export { default as Combobox } from './components/combobox/combobox.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.26.0",
+	"version": "0.28.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -58,8 +58,7 @@
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.58.2",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.0.10",
-		"vite-plugin-devtools-json": "^1.0.0"
+		"vite": "^8.0.10"
 	},
 	"keywords": [
 		"svelte"