compote-ui 0.27.0 → 0.29.0

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/dialog/dialog-close-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
+	import { PhX } from '../../icons';
+
+	interface Props extends DialogCloseTriggerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Dialog.CloseTrigger
+	{...rest}
+	class={className ??
+		'absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50'}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhX class="size-4" />
+		<span class="sr-only">Close</span>
+	{/if}
+</Dialog.CloseTrigger>

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

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import type { DialogDescriptionBaseProps } from '@ark-ui/svelte/dialog';
+
+	interface Props extends DialogDescriptionBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Dialog.Description {...rest} class={className ?? 'mt-1 text-sm text-ink-dim'}>
+	{@render children?.()}
+</Dialog.Description>

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

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children: Snippet;
+	}
+
+	let { class: className, children }: Props = $props();
+</script>
+
+<div class={className ?? 'mt-4 flex justify-end gap-3'}>
+	{@render children()}
+</div>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children: Snippet;
+}
+declare const DialogFooter: import("svelte").Component<Props, {}, "">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import type { DialogTitleBaseProps } from '@ark-ui/svelte/dialog';
+
+	interface Props extends DialogTitleBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Dialog.Title {...rest} class={className ?? 'text-lg font-semibold'}>
+	{@render children?.()}
+</Dialog.Title>

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

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

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

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

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

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

package/dist/components/dialog/dialog.svelte

@@ -2,15 +2,11 @@
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { cn } from 'tailwind-variants';
-	import { PhX } from '../../icons';
 	import type { DialogProps } from './dialog.types';
 
 	let {
 		open = $bindable(),
-		title,
-		description,
 		children,
-		footer,
 		contentClass,
 		lazyMount = true,
 		unmountOnExit = true,
@@ -30,29 +26,7 @@
 					contentClass
 				)}
 			>
-				<Dialog.Title class="text-lg font-semibold">{title}</Dialog.Title>
-				{#if description}
-					<Dialog.Description class="mt-1 text-sm text-ink-dim">
-						{description}
-					</Dialog.Description>
-				{/if}
-
-				<div class="mt-4">
-					{@render children()}
-				</div>
-
-				{#if footer}
-					<div class="mt-4 flex justify-end gap-3">
-						{@render footer()}
-					</div>
-				{/if}
-
-				<Dialog.CloseTrigger
-					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
-				>
-					<PhX class="size-4" />
-					<span class="sr-only">Close</span>
-				</Dialog.CloseTrigger>
+				{@render children()}
 			</Dialog.Content>
 		</Dialog.Positioner>
 	</Portal>

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

@@ -4,10 +4,7 @@ export type { DialogRootBaseProps };
 type DialogSharedProps = Pick<DialogRootBaseProps, 'closeOnEscape' | 'closeOnInteractOutside' | 'onOpenChange' | 'lazyMount' | 'unmountOnExit'>;
 export interface DialogProps extends DialogSharedProps {
     open: boolean;
-    title: string;
-    description?: string;
     children: Snippet;
-    footer?: Snippet;
     contentClass?: string;
     initialFocusEl?: DialogRootBaseProps['initialFocusEl'];
 }

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

@@ -0,0 +1,7 @@
+export { default as Root } from './dialog.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';
+export { default as CloseTrigger } from './dialog-close-trigger.svelte';
+export { default as Footer } from './dialog-footer.svelte';
+export type { DialogProps, AlertDialogProps, DialogRootBaseProps } from './dialog.types';

package/dist/components/dialog/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './dialog.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';
+export { default as CloseTrigger } from './dialog-close-trigger.svelte';
+export { default as Footer } from './dialog-footer.svelte';

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/index.d.ts

@@ -11,9 +11,10 @@ export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
-export { default as Dialog } from './components/dialog/dialog.svelte';
+export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
-export type { DialogProps, AlertDialogProps } from './components/dialog/dialog.types';
+export type { 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

@@ -10,8 +10,9 @@ export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
-export { default as Dialog } from './components/dialog/dialog.svelte';
+export * as Dialog from './components/dialog';
 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.27.0",
+	"version": "0.29.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -50,16 +50,15 @@
 		"globals": "^17.5.0",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.4.1",
-		"prettier-plugin-tailwindcss": "^0.7.2",
+		"prettier-plugin-tailwindcss": "^0.7.4",
 		"publint": "^0.3.17",
 		"svelte": "^5.55.4",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.4",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.58.2",
+		"typescript-eslint": "^8.59.1",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.0.10",
-		"vite-plugin-devtools-json": "^1.0.0"
+		"vite": "^8.0.10"
 	},
 	"keywords": [
 		"svelte"