compote-ui 0.64.0 → 0.65.0

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

@@ -75,6 +75,7 @@ export declare function createTable<T extends RowData>(options: CreateDataTableO
         };
         equalsString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         inNumberRange: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: [number, number]) => boolean) & {
             resolveFilterValue: (val: [any, any]) => readonly [number, number];
@@ -82,9 +83,11 @@ export declare function createTable<T extends RowData>(options: CreateDataTableO
         };
         includesString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         includesStringSensitive: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         weakEquals: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;

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

@@ -69,6 +69,7 @@ export declare function getRowCells<T extends RowData>(row: Row<DataTableFeature
         };
         equalsString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         inNumberRange: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: [number, number]) => boolean) & {
             resolveFilterValue: (val: [any, any]) => readonly [number, number];
@@ -76,9 +77,11 @@ export declare function getRowCells<T extends RowData>(row: Row<DataTableFeature
         };
         includesString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         includesStringSensitive: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         weakEquals: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;

package/dist/components/data-table-v9/features.d.ts

@@ -46,6 +46,7 @@ export declare const dataTableFeatures: {
         };
         equalsString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         inNumberRange: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: [number, number]) => boolean) & {
             resolveFilterValue: (val: [any, any]) => readonly [number, number];
@@ -53,9 +54,11 @@ export declare const dataTableFeatures: {
         };
         includesString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         includesStringSensitive: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;
+            resolveFilterValue: (val: any) => string;
         };
         weakEquals: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
             autoRemove: (val: any) => boolean;

package/dist/components/data-table-v9/table-view-state.svelte.d.ts

@@ -66,6 +66,7 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             equalsString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             inNumberRange: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: [number, number]) => boolean) & {
                 resolveFilterValue: (val: [any, any]) => readonly [number, number];
@@ -73,9 +74,11 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             includesString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             includesStringSensitive: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             weakEquals: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
@@ -130,6 +133,7 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             equalsString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             inNumberRange: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: [number, number]) => boolean) & {
                 resolveFilterValue: (val: [any, any]) => readonly [number, number];
@@ -137,9 +141,11 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             includesString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             includesStringSensitive: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             weakEquals: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
@@ -195,6 +201,7 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             equalsString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             inNumberRange: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: [number, number]) => boolean) & {
                 resolveFilterValue: (val: [any, any]) => readonly [number, number];
@@ -202,9 +209,11 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             includesString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             includesStringSensitive: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             weakEquals: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
@@ -259,6 +268,7 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             equalsString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             inNumberRange: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: [number, number]) => boolean) & {
                 resolveFilterValue: (val: [any, any]) => readonly [number, number];
@@ -266,9 +276,11 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             };
             includesString: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             includesStringSensitive: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;
+                resolveFilterValue: (val: any) => string;
             };
             weakEquals: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: unknown) => boolean) & {
                 autoRemove: (val: any) => boolean;

package/dist/components/progress/progress-circular.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Progress } from '@ark-ui/svelte/progress';
+	import type { ProgressCircularProps, ProgressSize, ProgressVariant } from './types';
+
+	let {
+		value = $bindable(),
+		label,
+		showValueText = false,
+		size = 'md',
+		thickness,
+		variant = 'primary',
+		class: className,
+		...rootProps
+	}: ProgressCircularProps = $props();
+
+	const sizeMap: Record<ProgressSize, number> = {
+		sm: 40,
+		md: 64,
+		lg: 96
+	};
+
+	const px = $derived(typeof size === 'number' ? size : sizeMap[size]);
+	const stroke = $derived(thickness ?? Math.max(3, Math.round(px / 10)));
+
+	const strokeColor: Record<ProgressVariant, string> = {
+		primary: 'stroke-primary',
+		success: 'stroke-success',
+		danger: 'stroke-danger',
+		warning: 'stroke-warning',
+		info: 'stroke-info'
+	};
+</script>
+
+<Progress.Root bind:value {...rootProps} class={className}>
+	<div class="inline-flex flex-col items-center gap-2">
+		<div class="relative inline-flex items-center justify-center">
+			<Progress.Circle
+				class="data-[state=indeterminate]:animate-spin"
+				style="--size: {px}px; --thickness: {stroke}px"
+			>
+				<Progress.CircleTrack class="stroke-surface-3" />
+				<Progress.CircleRange
+					class={[
+						'transition-[stroke-dashoffset] duration-300 ease-out',
+						'data-[state=indeterminate]:[stroke-dasharray:calc(var(--circumference)*0.25)_var(--circumference)]! data-[state=indeterminate]:[stroke-dashoffset:0]!',
+						strokeColor[variant]
+					]}
+				/>
+			</Progress.Circle>
+			{#if showValueText}
+				<Progress.ValueText class="absolute text-sm font-medium tabular-nums text-ink" />
+			{/if}
+		</div>
+		{#if label}
+			<Progress.Label class="text-sm font-medium text-ink">{label}</Progress.Label>
+		{/if}
+	</div>
+</Progress.Root>

package/dist/components/progress/progress-circular.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressCircularProps } from './types';
+declare const ProgressCircular: import("svelte").Component<ProgressCircularProps, {}, "value">;
+type ProgressCircular = ReturnType<typeof ProgressCircular>;
+export default ProgressCircular;

package/dist/components/progress/progress-linear.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { Progress } from '@ark-ui/svelte/progress';
+	import { cn } from 'tailwind-variants';
+	import type { ProgressLinearProps, ProgressSize, ProgressVariant } from './types';
+
+	let {
+		value = $bindable(),
+		label,
+		showValueText = false,
+		size = 'md',
+		variant = 'primary',
+		class: className,
+		...rootProps
+	}: ProgressLinearProps = $props();
+
+	const trackHeight: Record<ProgressSize, string> = {
+		sm: 'h-1',
+		md: 'h-2',
+		lg: 'h-3'
+	};
+
+	const rangeColor: Record<ProgressVariant, string> = {
+		primary: 'bg-primary',
+		success: 'bg-success',
+		danger: 'bg-danger',
+		warning: 'bg-warning',
+		info: 'bg-info'
+	};
+</script>
+
+<Progress.Root bind:value {...rootProps} class={cn('flex w-full flex-col gap-1.5', className)}>
+	{#if label || showValueText}
+		<div class="flex items-center justify-between gap-2">
+			{#if label}
+				<Progress.Label class="text-sm font-medium text-ink">{label}</Progress.Label>
+			{/if}
+			{#if showValueText}
+				<Progress.ValueText class="text-sm tabular-nums text-ink-dim" />
+			{/if}
+		</div>
+	{/if}
+	<Progress.Track class={cn('w-full overflow-hidden rounded-full bg-surface-3', trackHeight[size])}>
+		<Progress.Range
+			class={cn(
+				'h-full rounded-full transition-[width] duration-300 ease-out',
+				'data-[state=indeterminate]:w-2/5 data-[state=indeterminate]:animate-[compote-progress-indeterminate_1.2s_ease-in-out_infinite]',
+				rangeColor[variant]
+			)}
+		/>
+	</Progress.Track>
+</Progress.Root>

package/dist/components/progress/progress-linear.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressLinearProps } from './types';
+declare const ProgressLinear: import("svelte").Component<ProgressLinearProps, {}, "value">;
+type ProgressLinear = ReturnType<typeof ProgressLinear>;
+export default ProgressLinear;

package/dist/components/progress/types.d.ts

@@ -0,0 +1,23 @@
+import type { ProgressRootBaseProps } from '@ark-ui/svelte/progress';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export type ProgressVariant = 'primary' | 'success' | 'danger' | 'warning' | 'info';
+interface ProgressSharedProps extends ProgressRootBaseProps {
+    /** Optional label rendered above the progress indicator. */
+    label?: string;
+    /** Render the formatted value text (e.g. `50%`). */
+    showValueText?: boolean;
+    /** Color of the filled range. */
+    variant?: ProgressVariant;
+    class?: string;
+}
+export interface ProgressLinearProps extends ProgressSharedProps {
+    /** Thickness of the track. */
+    size?: ProgressSize;
+}
+export interface ProgressCircularProps extends ProgressSharedProps {
+    /** Diameter of the ring in pixels. */
+    size?: ProgressSize | number;
+    /** Stroke width of the ring in pixels. */
+    thickness?: number;
+}
+export {};

package/dist/components/progress/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -45,6 +45,9 @@ export type { PasswordInputProps } from './components/password-input/types';
 export { default as PhoneInput } from './components/phone-input/phone-input.svelte';
 export type { PhoneInputProps } from './components/phone-input/types';
 export * as Popover from './components/popover';
+export { default as ProgressLinear } from './components/progress/progress-linear.svelte';
+export { default as ProgressCircular } from './components/progress/progress-circular.svelte';
+export type { ProgressLinearProps, ProgressCircularProps, ProgressSize, ProgressVariant } from './components/progress/types';
 export { default as QrCode } from './components/qr-code/qr-code.svelte';
 export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';

package/dist/index.js

@@ -32,6 +32,8 @@ export { default as NumberInput } from './components/number-input/number-input.s
 export { default as PasswordInput } from './components/password-input/password-input.svelte';
 export { default as PhoneInput } from './components/phone-input/phone-input.svelte';
 export * as Popover from './components/popover';
+export { default as ProgressLinear } from './components/progress/progress-linear.svelte';
+export { default as ProgressCircular } from './components/progress/progress-circular.svelte';
 export { default as QrCode } from './components/qr-code/qr-code.svelte';
 export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';

package/dist/theme.css

@@ -124,3 +124,12 @@
 	outline: 2px solid var(--compote-ring);
 	outline-offset: 2px;
 }
+
+@keyframes compote-progress-indeterminate {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(250%);
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.64.0",
+	"version": "0.65.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -60,12 +60,12 @@
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.9",
-		"@sveltejs/kit": "^2.66.0",
+		"@sveltejs/kit": "^2.69.2",
 		"@sveltejs/package": "^2.5.8",
-		"@sveltejs/vite-plugin-svelte": "7.1.2",
+		"@sveltejs/vite-plugin-svelte": "7.2.0",
 		"@tailwindcss/vite": "^4.3.2",
-		"@tanstack/intent": "^0.3.2",
-		"@tanstack/svelte-table": "^9.0.0-beta.26",
+		"@tanstack/intent": "^0.3.5",
+		"@tanstack/svelte-table": "^9.0.0-beta.36",
 		"@tanstack/svelte-virtual": "^3.13.31",
 		"@types/node": "^22.20.0",
 		"eslint": "^10.5.0",
@@ -77,13 +77,13 @@
 		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.21",
 		"svelte": "^5.56.4",
-		"svelte-check": "^4.6.0",
+		"svelte-check": "^4.7.2",
 		"tailwindcss": "^4.3.2",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.61.1",
+		"typescript-eslint": "^8.63.0",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.1.2"
+		"vite": "^8.1.3"
 	},
 	"keywords": [
 		"svelte",