compote-ui 0.52.6 → 0.55.0

package/dist/components/combobox/combobox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends ListItem">
 	import { Combobox } from '@ark-ui/svelte/combobox';
-	import { Field } from '@ark-ui/svelte/field';
+	import { Field, useFieldContext } from '@ark-ui/svelte/field';
 	import { useFilter } from '@ark-ui/svelte/locale';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { createVirtualizer } from '@tanstack/svelte-virtual';
@@ -17,7 +17,9 @@
 		placeholder,
 		layout = 'vertical',
 		name,
+		invalid,
 		readOnly,
+		disabled,
 		multiple,
 		loading = false,
 		virtualized = false,
@@ -26,6 +28,11 @@
 		...restProps
 	}: ComboboxProps<T> = $props();
 
+	const field = useFieldContext();
+	const isInvalid = $derived(invalid ?? field?.()?.invalid ?? false);
+	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
+	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
+
 	let filterText = $state('');
 
 	const filters = useFilter({ sensitivity: 'base' });
@@ -112,7 +119,9 @@
 		: undefined}
 	openOnClick
 	{multiple}
-	{readOnly}
+	invalid={isInvalid}
+	readOnly={isReadOnly}
+	disabled={isDisabled}
 	{...restProps}
 	class={cn(
 		layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5',
@@ -151,7 +160,7 @@
 			placeholder={placeholder ?? 'Search...'}
 			class="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed disabled:opacity-50"
 		/>
-		{#if !readOnly}
+		{#if !isReadOnly}
 			<Combobox.ClearTrigger class="text-ink-dim transition-colors hover:text-ink">
 				<PhX class="size-4" />
 			</Combobox.ClearTrigger>

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

@@ -110,7 +110,9 @@ function createColumns(columns, localeCtx) {
                 type: column.type,
                 formatOptions: column.formatOptions,
                 formatLocale: column.formatLocale,
-                grow: column.grow
+                grow: column.grow,
+                sum: column.sum,
+                footer: column.footer
             }
         };
         if (typeof column.accessorFn === 'function') {

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

@@ -0,0 +1,96 @@
+<script lang="ts" generics="T extends RowData">
+	import type { Column, Row, RowData } from '@tanstack/table-core';
+	import { useLocaleContext } from '@ark-ui/svelte/locale';
+	import { cn } from 'tailwind-variants';
+	import type { DataTableInstance } from './data-table-utils';
+	import {
+		alignClass,
+		formatColumnFooter,
+		getColumnMeta,
+		getPinningStyle,
+		justifyClass,
+		joinStyles,
+		virtualColumnSizeStyle,
+		virtualGrowColumnSizeStyle,
+		virtualSelectionColumnSizeStyle
+	} from './data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		visibleLeafColumns: Column<T, unknown>[];
+		rows: Row<T>[];
+		isRowSelectionEnabled: boolean;
+		hasGrowColumn: boolean;
+		isVirtual?: boolean;
+	};
+
+	let {
+		table,
+		visibleLeafColumns,
+		rows,
+		isRowSelectionEnabled,
+		hasGrowColumn,
+		isVirtual = false
+	}: Props = $props();
+
+	const localeCtx = useLocaleContext();
+	const locale = $derived(localeCtx().locale);
+
+	function footCellStyle(column: Column<T, unknown>) {
+		const meta = getColumnMeta(column.columnDef);
+		if (!isVirtual) return getPinningStyle(column, table, true, isRowSelectionEnabled);
+		return joinStyles(
+			meta?.grow ? virtualGrowColumnSizeStyle() : virtualColumnSizeStyle(column.getSize()),
+			getPinningStyle(column, table, true, isRowSelectionEnabled)
+		);
+	}
+
+	function selectionCellStyle() {
+		return isVirtual
+			? joinStyles(
+					virtualSelectionColumnSizeStyle(),
+					'min-width: 40px',
+					'max-width: 40px',
+					'position: sticky',
+					'left: 0',
+					'z-index: 15'
+				)
+			: 'width: 40px; min-width: 40px; max-width: 40px; position: sticky; left: 0; z-index: 15';
+	}
+</script>
+
+<tfoot
+	class="sticky bottom-0 z-20 bg-surface-2 text-ink-dim"
+	style={isVirtual ? 'display: grid; position: sticky; bottom: 0; z-index: 20' : undefined}
+>
+	<tr class="h-9" style={isVirtual ? 'display: flex; width: 100%' : undefined}>
+		{#if isRowSelectionEnabled}
+			<td
+				class={cn(
+					'h-9 border-t border-surface-3 bg-surface-2 px-3 py-0',
+					isVirtual && 'flex items-center'
+				)}
+				style={selectionCellStyle()}
+			></td>
+		{/if}
+		{#each visibleLeafColumns as column (column.id)}
+			{@const meta = getColumnMeta(column.columnDef)}
+			{@const values = rows.map((row) => row.getValue(column.id))}
+			{@const footerText = formatColumnFooter(meta ?? {}, values, locale)}
+			<td
+				class={cn(
+					'h-9 truncate border-t border-surface-3 bg-surface-2 px-3 py-0 align-middle text-sm font-medium',
+					alignClass(meta?.align),
+					isVirtual && 'flex items-center',
+					isVirtual && justifyClass(meta?.align)
+				)}
+				style={footCellStyle(column)}
+			>
+				{footerText ?? ''}
+			</td>
+		{/each}
+		{#if !isVirtual && !hasGrowColumn}
+			<td aria-hidden="true" class="h-9 border-t border-surface-3 bg-surface-2 p-0"></td>
+		{/if}
+	</tr>
+</tfoot>

package/dist/components/data-table-v8/data-table-foot.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Column, Row, RowData } from '@tanstack/table-core';
+import type { DataTableInstance } from './data-table-utils';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        visibleLeafColumns: Column<T, unknown>[];
+        rows: Row<T>[];
+        isRowSelectionEnabled: boolean;
+        hasGrowColumn: boolean;
+        isVirtual?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableFoot: $$IsomorphicComponent;
+type DataTableFoot<T extends RowData> = InstanceType<typeof DataTableFoot<T>>;
+export default DataTableFoot;

package/dist/components/data-table-v8/data-table-utils.d.ts

@@ -29,3 +29,4 @@ export declare function getColumnMeta(columnDef: {
     meta?: unknown;
 }): DataTableColumnMeta | undefined;
 export declare function joinStyles(...styles: Array<string | undefined>): string;
+export declare function formatColumnFooter(meta: DataTableColumnMeta, values: unknown[], locale: string): string | undefined;

package/dist/components/data-table-v8/data-table-utils.js

@@ -133,3 +133,28 @@ export function getColumnMeta(columnDef) {
 export function joinStyles(...styles) {
     return styles.filter(Boolean).join('; ');
 }
+const FOOTER_SUM_FORMAT_DEFAULTS = {
+    currency: { style: 'currency', currency: 'USD' },
+    percent: { style: 'percent' },
+    number: {}
+};
+export function formatColumnFooter(meta, values, locale) {
+    if (meta.footer) {
+        const result = meta.footer(values);
+        if (result === null || result === undefined)
+            return undefined;
+        return String(result);
+    }
+    if (meta.sum) {
+        const sum = values.reduce((acc, val) => acc + (typeof val === 'number' ? val : Number(val) || 0), 0);
+        const numDefaults = meta.type ? FOOTER_SUM_FORMAT_DEFAULTS[meta.type] : undefined;
+        if (numDefaults !== undefined) {
+            return new Intl.NumberFormat(meta.formatLocale ?? locale, {
+                ...numDefaults,
+                ...meta.formatOptions
+            }).format(sum);
+        }
+        return String(sum);
+    }
+    return undefined;
+}

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

@@ -5,6 +5,7 @@
 	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
 	import type { DataTableInstance } from './data-table-utils';
 	import DataTableHead from './data-table-head.svelte';
+	import DataTableFoot from './data-table-foot.svelte';
 	import FlexRender from './flex-render.svelte';
 	import {
 		alignClass,
@@ -105,6 +106,12 @@
 		return getSelectedRowCount(table);
 	});
 	const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
+	const hasFooter = $derived(
+		visibleLeafColumns.some((col) => {
+			const meta = getColumnMeta(col.columnDef);
+			return !!(meta?.sum || meta?.footer);
+		})
+	);
 </script>
 
 <div
@@ -244,6 +251,15 @@
 					</tr>
 				{/each}
 			</tbody>
+			{#if hasFooter}
+				<DataTableFoot
+					{table}
+					{visibleLeafColumns}
+					rows={rowModel.rows}
+					{isRowSelectionEnabled}
+					{hasGrowColumn}
+				/>
+			{/if}
 		</table>
 	</div>
 

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

@@ -33,6 +33,8 @@ export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<
     formatLocale?: string;
     pinned?: 'left' | 'right';
     grow?: boolean;
+    sum?: boolean;
+    footer?: (values: unknown[]) => string | number | undefined;
     columns?: never;
 };
 export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
@@ -66,4 +68,6 @@ export type DataTableColumnMeta = {
     formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
     formatLocale?: string;
     grow?: boolean;
+    sum?: boolean;
+    footer?: (values: unknown[]) => string | number | undefined;
 };

package/dist/components/data-table-v8/virtual/data-table-virtualized.svelte

@@ -4,9 +4,11 @@
 	import { cn, type ClassValue } from 'tailwind-variants';
 	import type { DataTableInstance } from '../data-table-utils';
 	import DataTableHead from '../data-table-head.svelte';
+	import DataTableFoot from '../data-table-foot.svelte';
 	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
 	import {
 		getAllRowsSelectionState,
+		getColumnMeta,
 		getReactiveTableState,
 		getSelectedRowCount,
 		tableSizeStyle
@@ -69,6 +71,17 @@
 		return getSelectedRowCount(table);
 	});
 	const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
+	const visibleLeafColumns = $derived.by(() => {
+		const { columnVisibility } = getReactiveTableState(table);
+		void columnVisibility;
+		return table.getVisibleLeafColumns();
+	});
+	const hasFooter = $derived(
+		visibleLeafColumns.some((col) => {
+			const meta = getColumnMeta(col.columnDef);
+			return !!(meta?.sum || meta?.footer);
+		})
+	);
 </script>
 
 <div
@@ -110,6 +123,16 @@
 					{onRowDoubleClick}
 				/>
 			{/if}
+			{#if hasFooter}
+				<DataTableFoot
+					{table}
+					{visibleLeafColumns}
+					rows={rowModel.rows}
+					{isRowSelectionEnabled}
+					hasGrowColumn={false}
+					isVirtual
+				/>
+			{/if}
 		</table>
 	</div>
 

package/dist/components/date-input/date-input.svelte

@@ -1,75 +1,41 @@
 <script lang="ts">
 	import { DateInput } from '@ark-ui/svelte/date-input';
-	import { Field } from '@ark-ui/svelte/field';
-	import {
-		fromDateToLocal,
-		getLocalTimeZone,
-		parseAbsolute,
-		parseDate,
-		parseDateTime,
-		parseZonedDateTime
-	} from '@internationalized/date';
-	import type { DateValue, DateInputProps, NativeDateInput } from './types';
+	import { Field, useFieldContext } from '@ark-ui/svelte/field';
+	import type { DateInputProps } from './types';
 
 	let {
 		value = $bindable(),
 		defaultValue,
 		label,
 		name,
-		timeZone = getLocalTimeZone(),
-		hideTimeZone,
 		onValueChange,
+		invalid,
+		readOnly,
+		disabled,
 		...restProps
 	}: DateInputProps = $props();
 
-	const absoluteDateTimeRe = /(?:Z|[+-]\d{2}:\d{2})$/;
+	const field = useFieldContext();
+	const isInvalid = $derived(invalid ?? field?.()?.invalid ?? false);
+	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
+	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
 
-	function isAbsoluteDateTime(v: NativeDateInput): boolean {
-		return typeof v === 'string' && v.includes('T') && absoluteDateTimeRe.test(v);
-	}
-
-	function toDateValue(v: NativeDateInput): DateValue | null {
-		if (v == null) return null;
-		if (typeof v === 'string') {
-			if (!v) return null;
-			if (v.includes('T')) {
-				// ZonedDateTime.toString() format: "2024-01-15T10:30:00+02:00[Europe/Belgrade]"
-				if (v.includes('[')) return parseZonedDateTime(v);
-				if (absoluteDateTimeRe.test(v)) return parseAbsolute(v, timeZone);
-				return parseDateTime(v);
-			}
-			return parseDate(v);
-		}
-		if (v instanceof Date) return fromDateToLocal(v);
-		return v;
-	}
-
-	function fromDateValue(dv: DateValue | null, source: NativeDateInput): NativeDateInput {
-		if (dv == null) return null;
-		if (typeof source === 'string') {
-			if (absoluteDateTimeRe.test(source)) return dv.toDate(timeZone).toISOString();
-			return dv.toString();
-		}
-		if (source instanceof Date) return dv.toDate(getLocalTimeZone());
-		return dv;
-	}
-
-	const arkValue = $derived(toDateValue(value));
-	const arkDefault = $derived(toDateValue(defaultValue));
-	const shouldHideTimeZone = $derived(hideTimeZone ?? isAbsoluteDateTime(value));
+	const arkValue = $derived(value ?? null);
+	const arkDefault = $derived(defaultValue ?? null);
 </script>
 
 <DateInput.Root
 	{...restProps}
-	{timeZone}
-	hideTimeZone={shouldHideTimeZone}
+	invalid={isInvalid}
+	readOnly={isReadOnly}
+	disabled={isDisabled}
 	value={arkValue ? [arkValue] : []}
 	defaultValue={arkDefault ? [arkDefault] : undefined}
 	onValueChange={(details) => {
 		const dv = details.value[0] ?? null;
 		// Guard: skip if Ark UI echoes back the same date (prevents reactive loop)
 		if (dv?.toString() === arkValue?.toString()) return;
-		value = fromDateValue(dv, value);
+		value = dv;
 		onValueChange?.(details);
 	}}
 >

package/dist/components/date-input/types.d.ts

@@ -1,10 +1,9 @@
 import type { DateInputRootBaseProps } from '@ark-ui/svelte/date-input';
 import type { DateInputDateValue as DateValue } from '@ark-ui/svelte/date-input';
 export type { DateValue };
-export type NativeDateInput = DateValue | string | Date | null | undefined;
 export interface DateInputProps extends Omit<DateInputRootBaseProps, 'value' | 'defaultValue'> {
-    value?: NativeDateInput;
-    defaultValue?: NativeDateInput;
+    value?: DateValue | null;
+    defaultValue?: DateValue | null;
     label?: string;
     name?: string;
 }

package/dist/components/select/select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T extends ListItem">
-	import { Field } from '@ark-ui/svelte/field';
+	import { Field, useFieldContext } from '@ark-ui/svelte/field';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { Select } from '@ark-ui/svelte/select';
 	import type { SelectProps } from './types';
@@ -15,15 +15,26 @@
 		layout = 'vertical',
 		size = 'default',
 		name,
+		invalid,
+		readOnly,
+		disabled,
 		...restProps
 	}: SelectProps<T> = $props();
 
+	const field = useFieldContext();
+	const isInvalid = $derived(invalid ?? field?.()?.invalid ?? false);
+	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
+	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
+
 	const collection = $derived(createListCollection(items));
 </script>
 
 <Select.Root
 	{collection}
 	{...restProps}
+	invalid={isInvalid}
+	readOnly={isReadOnly}
+	disabled={isDisabled}
 	deselectable
 	value={value ? [value.toString()] : []}
 	onValueChange={(valueChangeDetails) => {

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export type { DateFieldProps } from './components/date-field/types';
 export { default as DateRangeField } from './components/date-range-field/date-range-field.svelte';
 export type { DateRangeFieldProps } from './components/date-range-field/types';
 export { default as DateInput } from './components/date-input/date-input.svelte';
-export type { DateInputProps } from './components/date-input/types';
+export type { DateInputProps, DateValue as DateInputDateValue } from './components/date-input/types';
 export { default as DatePicker } from './components/date-picker/date-picker.svelte';
 export type { DatePickerProps } from './components/date-picker/types';
 export * as Dialog from './components/dialog';
@@ -51,6 +51,7 @@ export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { LocaleProvider, useLocaleContext } from '@ark-ui/svelte/locale';
+export { getLocalTimeZone, parseAbsolute, parseDateTime } from '@internationalized/date';
 export { Portal } from '@ark-ui/svelte/portal';
 export type { PortalProps } from '@ark-ui/svelte/portal';
 export { createListCollection, createTreeCollection } from './utils/collections';

package/dist/index.js

@@ -39,6 +39,7 @@ export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { LocaleProvider, useLocaleContext } from '@ark-ui/svelte/locale';
+export { getLocalTimeZone, parseAbsolute, parseDateTime } from '@internationalized/date';
 export { Portal } from '@ark-ui/svelte/portal';
 export { createListCollection, createTreeCollection } from './utils/collections';
 export { PersistedState, Debounced } from 'runed';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.52.6",
+	"version": "0.55.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -56,14 +56,13 @@
 		}
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.5",
 		"@eslint/js": "^10.0.1",
 		"@faker-js/faker": "^10.4.0",
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.8",
-		"@sveltejs/kit": "^2.61.1",
-		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.2.4",
 		"@tanstack/svelte-virtual": "^3.13.28",
@@ -77,8 +76,8 @@
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.21",
-		"svelte": "^5.56.1",
-		"svelte-check": "^4.5.0",
+		"svelte": "^5.56.2",
+		"svelte-check": "^4.6.0",
 		"tailwindcss": "^4.2.4",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
@@ -93,6 +92,7 @@
 		"@ark-ui/svelte": "^5.22.0",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@iconify/svelte": "^5.2.1",
+		"@internationalized/date": "^3.12.2",
 		"runed": "^0.37.1",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2"