compote-ui 0.35.0 → 0.35.1

package/dist/components/data-table/data-table.svelte

@@ -299,7 +299,7 @@
 						{/if}
 						{#each row.getVisibleCells() as cell (cell.id)}
 							{@const columnDef = findColumnById(cell.column.id, columns)}
-							<td class={cn('px-3 py-2 text-ink-dim', alignClass(columnDef?.align))}>
+							<td class={cn('truncate px-3 py-2 text-ink-dim', alignClass(columnDef?.align))}>
 								{#if columnDef?.type === 'boolean'}
 									{@const value = getBooleanCellValue(cell.getValue())}
 									{#if value === true}

package/dist/components/hover-card/hover-card-content.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { HoverCard } from '@ark-ui/svelte/hover-card';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { cn } from 'tailwind-variants';
+	import type { ClassValue } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: ClassValue;
+		children: Snippet;
+		showArrow?: boolean;
+	}
+
+	let { class: className, children, showArrow = true }: Props = $props();
+</script>
+
+<Portal>
+	<HoverCard.Positioner>
+		<HoverCard.Content
+			class={cn(
+				'z-50 w-72 rounded-md border border-border bg-surface-1 p-4 shadow-md outline-none [--arrow-background:var(--compote-surface-1)] [--arrow-size:10px]',
+				className
+			)}
+		>
+			{#if showArrow}
+				<HoverCard.Arrow>
+					<HoverCard.ArrowTip class="border-t border-l border-border" />
+				</HoverCard.Arrow>
+			{/if}
+			{@render children()}
+		</HoverCard.Content>
+	</HoverCard.Positioner>
+</Portal>
+
+<style>
+	:global([data-scope='hover-card'][data-part='content']) {
+		transform-origin: var(--transform-origin);
+	}
+
+	:global([data-scope='hover-card'][data-part='content'][data-state='open']) {
+		animation: hover-card-in 150ms ease-out;
+	}
+
+	:global([data-scope='hover-card'][data-part='content'][data-state='closed']) {
+		animation: hover-card-out 100ms ease-in;
+	}
+
+	@keyframes hover-card-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes hover-card-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+</style>

package/dist/components/hover-card/hover-card-content.svelte.d.ts

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

package/dist/components/hover-card/hover-card-root.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { HoverCard } from '@ark-ui/svelte/hover-card';
+	import type { HoverCardRootBaseProps } from '@ark-ui/svelte/hover-card';
+	import type { Snippet } from 'svelte';
+
+	interface Props extends HoverCardRootBaseProps {
+		open?: boolean;
+		children: Snippet;
+		lazyMount?: boolean;
+		unmountOnExit?: boolean;
+	}
+
+	let {
+		open = $bindable(),
+		children,
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: Props = $props();
+</script>
+
+<HoverCard.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
+	{@render children()}
+</HoverCard.Root>

package/dist/components/hover-card/hover-card-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HoverCardRootBaseProps } from '@ark-ui/svelte/hover-card';
+import type { Snippet } from 'svelte';
+interface Props extends HoverCardRootBaseProps {
+    open?: boolean;
+    children: Snippet;
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+}
+declare const HoverCardRoot: import("svelte").Component<Props, {}, "open">;
+type HoverCardRoot = ReturnType<typeof HoverCardRoot>;
+export default HoverCardRoot;

package/dist/components/hover-card/hover-card-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { HoverCard } from '@ark-ui/svelte/hover-card';
+	import type { HoverCardTriggerProps } from '@ark-ui/svelte/hover-card';
+
+	type Props = Omit<HoverCardTriggerProps, 'class'> & {
+		class?: string;
+	};
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<HoverCard.Trigger class={className} {...restProps}>
+	{@render children?.()}
+</HoverCard.Trigger>

package/dist/components/hover-card/hover-card-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HoverCardTriggerProps } from '@ark-ui/svelte/hover-card';
+type Props = Omit<HoverCardTriggerProps, 'class'> & {
+    class?: string;
+};
+declare const HoverCardTrigger: import("svelte").Component<Props, {}, "">;
+type HoverCardTrigger = ReturnType<typeof HoverCardTrigger>;
+export default HoverCardTrigger;

package/dist/components/hover-card/index.d.ts

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

package/dist/components/hover-card/index.js

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

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as Button } from './components/button/button.svelte';
 export { default as LinkButton } from './components/button/link-button.svelte';
 export * as Card from './components/card';
 export * as Collapsible from './components/collapsible';
+export * as HoverCard from './components/hover-card';
 export * as ScrollArea from './components/scroll-area';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export type { ProcessImageOptions, CropRegion } from './utils/image-processing';

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as Button } from './components/button/button.svelte';
 export { default as LinkButton } from './components/button/link-button.svelte';
 export * as Card from './components/card';
 export * as Collapsible from './components/collapsible';
+export * as HoverCard from './components/hover-card';
 export * as ScrollArea from './components/scroll-area';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export * as Carousel from './components/carousel';

package/package.json

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