compote-ui 0.64.1 → 0.65.0

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.1",
+	"version": "0.65.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",