compote-ui 0.35.0 → 0.36.0

package/dist/components/data-table/create-table.d.ts

@@ -6,6 +6,8 @@ declare const dataTableFeatures: {
     columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnPinningFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnPinningFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnOrderingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnOrderingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
 };
@@ -31,6 +33,8 @@ export declare function createTable<T extends RowData>(options: CreateDataTableO
     columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnPinningFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnPinningFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnOrderingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnOrderingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
 }, T, DataTableSelectedState>;

package/dist/components/data-table/create-table.js

@@ -1,4 +1,4 @@
-import { columnVisibilityFeature, columnResizingFeature, columnSizingFeature, columnFilteringFeature, columnFacetingFeature, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedMinMaxValues, createFacetedUniqueValues, createTable as createTanStackTable, filterFns, renderComponent, renderSnippet, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
+import { columnVisibilityFeature, columnResizingFeature, columnSizingFeature, columnFilteringFeature, columnFacetingFeature, columnPinningFeature, columnOrderingFeature, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedMinMaxValues, createFacetedUniqueValues, createTable as createTanStackTable, filterFns, renderComponent, renderSnippet, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
 import { useLocaleContext } from '@ark-ui/svelte/locale';
 const dataTableFeatures = tableFeatures({
     columnVisibilityFeature,
@@ -6,6 +6,8 @@ const dataTableFeatures = tableFeatures({
     columnResizingFeature,
     columnFilteringFeature,
     columnFacetingFeature,
+    columnPinningFeature,
+    columnOrderingFeature,
     rowSelectionFeature,
     rowSortingFeature
 });
@@ -39,6 +41,7 @@ export function createTable(options) {
         initialState: {
             columnVisibility: createColumnVisibility(options.columns),
             columnSizing: createColumnSizing(options.columns),
+            columnPinning: createColumnPinning(options.columns),
             rowSelection: options.initialRowSelection ?? {},
             sorting: options.initialSorting ?? [],
             columnFilters: options.initialColumnFilters ?? []
@@ -66,6 +69,13 @@ function createColumnSizing(columns) {
         return sizes;
     }, {});
 }
+function createColumnPinning(columns) {
+    const leafCols = getLeafColumns(columns);
+    return {
+        left: leafCols.filter((c) => c.pinned === 'left').map(getColumnId),
+        right: leafCols.filter((c) => c.pinned === 'right').map(getColumnId)
+    };
+}
 function createColumns(columns, localeCtx) {
     return columns.map((column) => {
         if (isGroupColumn(column)) {

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

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends RowData">
 	import { FlexRender } from '@tanstack/svelte-table';
-	import type { CellData, Header, RowData } from '@tanstack/svelte-table';
+	import type { CellData, ColumnPinningPosition, Header, RowData } from '@tanstack/svelte-table';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type ClassValue } from 'tailwind-variants';
 	import { PhArrowSquareOut, PhCaretDown, PhCaretUp, PhCheck, PhX } from '../../icons';
@@ -110,6 +110,44 @@
 		return undefined;
 	}
 
+	//	type PinPosition = 'center' | false | 'left' | 'right';
+	function getPinningStyle(
+		column: {
+			getIsPinned(): ColumnPinningPosition;
+			getStart(position?: ColumnPinningPosition): number;
+			getAfter(position?: ColumnPinningPosition): number;
+			getIsLastColumn(position?: ColumnPinningPosition): boolean;
+			getIsFirstColumn(position?: ColumnPinningPosition): boolean;
+		},
+		isHeader = false
+	): string | undefined {
+		const isPinned = column.getIsPinned();
+		if (!isPinned) return undefined;
+
+		const zIndex = isHeader ? 15 : 1;
+		const selectionOffset = isRowSelectionEnabled ? 40 : 0;
+
+		if (isPinned === 'left') {
+			const left = column.getStart('left') + selectionOffset;
+			const shadow =
+				!isHeader && column.getIsLastColumn('left')
+					? 'box-shadow: -4px 0 4px -4px var(--compote-border) inset'
+					: undefined;
+			return ['position: sticky', `z-index: ${zIndex}`, `left: ${left}px`, shadow]
+				.filter(Boolean)
+				.join('; ');
+		} else {
+			const right = column.getAfter('right');
+			const shadow =
+				!isHeader && column.getIsFirstColumn('right')
+					? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
+					: undefined;
+			return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]
+				.filter(Boolean)
+				.join('; ');
+		}
+	}
+
 	function getUrlCellValue(value: unknown) {
 		if (typeof value !== 'string' || value.trim() === '') return undefined;
 		return value;
@@ -205,6 +243,7 @@
 						{#if isRowSelectionEnabled && headerGroupIndex === 0}
 							<th
 								class="border-b border-surface-3 bg-surface-2 px-3 py-2 text-center align-middle font-medium"
+								style="position: sticky; left: 0; z-index: 15"
 								rowspan={headerGroupCount}
 							>
 								{#if isMultiRowSelectionEnabled}
@@ -230,6 +269,7 @@
 								aria-sort={header.column.getCanSort()
 									? getHeaderAriaSort(sortDirection)
 									: undefined}
+								style={getPinningStyle(header.column, true)}
 							>
 								{#if !header.isPlaceholder}
 									{#if header.column.getCanSort()}
@@ -281,12 +321,18 @@
 					{@const rowSelected = getRowSelectionState(table.store.state.rowSelection, row.id)}
 					<tr
 						class={cn(
-							'border-b border-surface-3 last:border-b-0 hover:bg-well/60',
-							rowSelected && 'bg-well/60'
+							'group/row border-b border-surface-3 last:border-b-0',
+							'[--row-bg:var(--compote-surface-1)]',
+							'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
+							rowSelected &&
+								'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
 						)}
 					>
 						{#if isRowSelectionEnabled}
-							<td class="px-3 py-2 text-center align-middle">
+							<td
+								class="bg-(--row-bg) px-3 py-2 text-center align-middle"
+								style="position: sticky; left: 0; z-index: 1"
+							>
 								<Checkbox
 									size="sm"
 									aria-label="Select row"
@@ -299,7 +345,14 @@
 						{/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',
+									alignClass(columnDef?.align),
+									cell.column.getIsPinned() && 'bg-(--row-bg)'
+								)}
+								style={getPinningStyle(cell.column)}
+							>
 								{#if columnDef?.type === 'boolean'}
 									{@const value = getBooleanCellValue(cell.getValue())}
 									{#if value === true}

package/dist/components/data-table/types.d.ts

@@ -21,6 +21,7 @@ export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<
     type?: DataTableColumnType;
     formatOptions?: Intl.NumberFormatOptions;
     formatLocale?: string;
+    pinned?: 'left' | 'right';
     columns?: never;
 };
 export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {

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.36.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",