compote-ui 0.30.2 → 0.31.0

package/dist/components/dialog/dialog.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="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>

package/dist/components/image-crop-dialog/image-crop-dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Dialog from '../dialog/dialog.svelte';
+	import * as Dialog from '../dialog';
 	import ImageCropper from '../image-cropper/image-cropper.svelte';
 	import { Button } from '../..';
 	import { cropImage, processImage } from '../../utils/image-processing';
@@ -47,16 +47,17 @@
 	}
 </script>
 
-<Dialog
+<Dialog.Root
 	bind:open
-	{title}
-	{description}
 	onOpenChange={(details) => {
 		if (!details.open) onCancel();
 	}}
 >
+	<Dialog.Title>{title}</Dialog.Title>
+	<Dialog.Description>{description}</Dialog.Description>
+
 	<ImageCropper bind:getCropData src={imageSrc} alt="Crop preview" {aspectRatio} />
-	{#snippet footer()}
+	<Dialog.Footer>
 		<Button variant="outline" onclick={onCancel} disabled={processing}>Cancel</Button>
 		{#if showSkipCrop}
 			<Button variant="outline" onclick={handleSkipCrop} disabled={processing}>
@@ -66,5 +67,5 @@
 		<Button onclick={handleCrop} disabled={processing}>
 			{processing ? 'Processing...' : confirmLabel}
 		</Button>
-	{/snippet}
-</Dialog>
+	</Dialog.Footer>
+</Dialog.Root>

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

@@ -2,9 +2,10 @@
 	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
 	import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
 	import { cn } from 'tailwind-variants';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends ToggleGroupItemBaseProps {
-		class?: string;
+		class?: ClassValue | null;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
@@ -14,7 +15,7 @@
 	{...rest}
 	class={cn(
 		'inline-flex h-8 min-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
+		className as never
 	)}
 >
 	{@render children?.()}

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

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

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

@@ -0,0 +1,3 @@
+export { default as Root } from './tooltip-root.svelte';
+export { default as Trigger } from './tooltip-trigger.svelte';
+export { default as Content } from './tooltip-content.svelte';

package/dist/components/tooltip/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './tooltip-root.svelte';
+export { default as Trigger } from './tooltip-trigger.svelte';
+export { default as Content } from './tooltip-content.svelte';

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { Tooltip } from '@ark-ui/svelte/tooltip';
+	import type { TooltipContentBaseProps } from '@ark-ui/svelte/tooltip';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = TooltipContentBaseProps & {
+		class?: string;
+		children: Snippet;
+		showArrow?: boolean;
+	};
+
+	const { class: className, children, showArrow = true, ...restProps }: Props = $props();
+</script>
+
+<Portal>
+	<Tooltip.Positioner>
+		<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]',
+				className
+			)}
+		>
+			{#if showArrow}
+				<Tooltip.Arrow>
+					<Tooltip.ArrowTip class="border-l border-t" />
+				</Tooltip.Arrow>
+			{/if}
+			{@render children()}
+		</Tooltip.Content>
+	</Tooltip.Positioner>
+</Portal>
+
+<style>
+	:global([data-scope='tooltip'][data-part='content'][data-state='open']) {
+		animation: tooltip-scale-fade-in 0.15s ease-out;
+		transform-origin: var(--transform-origin);
+	}
+
+	:global([data-scope='tooltip'][data-part='content'][data-state='closed']) {
+		animation: tooltip-scale-fade-out 0.1s ease-in;
+		transform-origin: var(--transform-origin);
+	}
+
+	@keyframes tooltip-scale-fade-in {
+		from {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes tooltip-scale-fade-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { TooltipContentBaseProps } from '@ark-ui/svelte/tooltip';
+import type { Snippet } from 'svelte';
+type Props = TooltipContentBaseProps & {
+    class?: string;
+    children: Snippet;
+    showArrow?: boolean;
+};
+declare const TooltipContent: import("svelte").Component<Props, {}, "">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Tooltip } from '@ark-ui/svelte/tooltip';
+	import type { TooltipRootBaseProps } from '@ark-ui/svelte/tooltip';
+	import type { Snippet } from 'svelte';
+
+	type Props = TooltipRootBaseProps & {
+		children?: Snippet;
+	};
+
+	const { children, ...restProps }: Props = $props();
+</script>
+
+<Tooltip.Root {...restProps}>
+	{@render children?.()}
+</Tooltip.Root>

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

@@ -0,0 +1,8 @@
+import type { TooltipRootBaseProps } from '@ark-ui/svelte/tooltip';
+import type { Snippet } from 'svelte';
+type Props = TooltipRootBaseProps & {
+    children?: Snippet;
+};
+declare const TooltipRoot: import("svelte").Component<Props, {}, "">;
+type TooltipRoot = ReturnType<typeof TooltipRoot>;
+export default TooltipRoot;

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Tooltip } from '@ark-ui/svelte/tooltip';
+	import type { TooltipTriggerBaseProps } from '@ark-ui/svelte/tooltip';
+	import type { Snippet } from 'svelte';
+	import { button, type ButtonSize, type ButtonVariant } from '../button/button.variants';
+
+	type Props = TooltipTriggerBaseProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		class?: string;
+		children?: Snippet;
+	};
+
+	const {
+		asChild,
+		variant = 'ghost',
+		size = 'icon',
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<Tooltip.Trigger
+	{...restProps}
+	{asChild}
+	class={asChild ? className : button({ variant, size, class: className })}
+>
+	{@render children?.()}
+</Tooltip.Trigger>

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

@@ -0,0 +1,12 @@
+import type { TooltipTriggerBaseProps } from '@ark-ui/svelte/tooltip';
+import type { Snippet } from 'svelte';
+import { type ButtonSize, type ButtonVariant } from '../button/button.variants';
+type Props = TooltipTriggerBaseProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    class?: string;
+    children?: Snippet;
+};
+declare const TooltipTrigger: import("svelte").Component<Props, {}, "">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
+export * as Tooltip from './components/tooltip';
 export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';

package/dist/index.js

@@ -25,6 +25,7 @@ export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
+export * as Tooltip from './components/tooltip';
 export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';

package/package.json

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