compote-ui 0.47.3 → 0.48.1

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

@@ -2,20 +2,42 @@
 	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';
+	import {
+		button,
+		type ButtonVariant,
+		type ButtonSize
+	} from '../button/button.variants';
+	import type { ClassValue } from 'tailwind-variants';
 
 	interface Props extends DialogCloseTriggerBaseProps {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
 		class?: ClassValue;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, variant, size, children, ...rest }: Props = $props();
+
+	const isIconMode = $derived(!children);
+
+	const classes = $derived(
+		isIconMode
+			? button({
+					variant: variant ?? 'ghost',
+					size: size ?? 'icon-sm',
+					class: [
+						'absolute top-3 right-3 opacity-70 hover:opacity-100 active:opacity-50',
+						className
+					]
+				})
+			: button({
+					variant: variant ?? 'outline',
+					size: size ?? 'default',
+					class: className
+				})
+	);
 </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'}
->
+<Dialog.CloseTrigger {...rest} class={classes}>
 	{#if children}
 		{@render children()}
 	{:else}

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

@@ -1,6 +1,9 @@
 import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
-import type { ClassValue } from 'svelte/elements';
+import { type ButtonVariant, type ButtonSize } from '../button/button.variants';
+import type { ClassValue } from 'tailwind-variants';
 interface Props extends DialogCloseTriggerBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     class?: ClassValue;
 }
 declare const DialogCloseTrigger: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	import { ScrollArea } from '../..';
+
+	interface Props {
+		class?: ClassValue;
+		children: Snippet;
+	}
+
+	let { class: className, children }: Props = $props();
+</script>
+
+<ScrollArea.Root class={cn('min-h-0 flex-1', className)}>
+	<ScrollArea.Viewport>
+		<ScrollArea.Content>
+			{@render children()}
+		</ScrollArea.Content>
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar>
+		<ScrollArea.Thumb />
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Corner />
+</ScrollArea.Root>

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

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

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	interface Props {
+		class?: ClassValue;
+		children: Snippet;
+	}
+
+	let { class: className, children }: Props = $props();
+</script>
+
+<div
+	class={cn(
+		'mt-auto flex flex-row items-center justify-end gap-2 border-t border-border p-4',
+		className
+	)}
+>
+	{@render children()}
+</div>

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

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

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

@@ -9,3 +9,5 @@ export { default as Header } from './drawer-header.svelte';
 export { default as Title } from './drawer-title.svelte';
 export { default as Description } from './drawer-description.svelte';
 export { default as CloseTrigger } from './drawer-close-trigger.svelte';
+export { default as Body } from './drawer-body.svelte';
+export { default as Footer } from './drawer-footer.svelte';

package/dist/components/drawer/index.js

@@ -9,3 +9,5 @@ export { default as Header } from './drawer-header.svelte';
 export { default as Title } from './drawer-title.svelte';
 export { default as Description } from './drawer-description.svelte';
 export { default as CloseTrigger } from './drawer-close-trigger.svelte';
+export { default as Body } from './drawer-body.svelte';
+export { default as Footer } from './drawer-footer.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.47.3",
+	"version": "0.48.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",