From a6f6685c388b2874d89190a971af631e82ee435a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 16 Apr 2024 21:19:23 -0400
Subject: [PATCH] svelte 5 progress

---
 .../bits/progress/components/progress.svelte  | 58 ++++++++-----------
 packages/bits-ui/src/lib/bits/progress/ctx.ts | 23 --------
 .../bits-ui/src/lib/bits/progress/index.ts    |  2 +-
 .../src/lib/bits/progress/progress.svelte.ts  | 53 +++++++++++++++++
 .../bits-ui/src/lib/bits/progress/types.ts    | 37 +++++-------
 5 files changed, 93 insertions(+), 80 deletions(-)
 delete mode 100644 packages/bits-ui/src/lib/bits/progress/ctx.ts
 create mode 100644 packages/bits-ui/src/lib/bits/progress/progress.svelte.ts

diff --git a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
index b8fa0507f..b90534a78 100644
--- a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
+++ b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
@@ -1,44 +1,36 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setCtx } from "../ctx.js";
-	import type { Props } from "../index.js";
+	import type { RootProps } from "../index.js";
+	import { setProgressRootState } from "../progress.svelte.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { styleToString } from "$lib/internal/style.js";
 
-	type $$Props = Props;
+	let {
+		asChild,
+		child,
+		children,
+		value: valueProp = 0,
+		max: maxProp = 100,
+		el = $bindable(),
+		style = {},
+		...restProps
+	}: RootProps = $props();
 
-	export let max: $$Props["max"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const value = readonlyBox(() => valueProp);
+	const max = readonlyBox(() => maxProp);
 
-	const {
-		elements: { root },
-		states: { value: localValue },
-		updateOption,
-		getAttrs,
-	} = setCtx({
-		max,
-		defaultValue: value,
-		onValueChange: ({ next }) => {
-			onValueChange?.(next);
-			value = next;
-			return next;
-		},
-	});
+	const progress = setProgressRootState({ value, max });
 
-	const attrs = getAttrs("root");
-
-	$: value !== undefined && localValue.set(value);
-	$: updateOption("max", max);
-
-	$: builder = $root;
-	$: Object.assign(builder, attrs);
+	const mergedProps = {
+		...restProps,
+		...progress.props,
+		style: styleToString(style),
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div bind:this={el} {...mergedProps}>
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/progress/ctx.ts b/packages/bits-ui/src/lib/bits/progress/ctx.ts
deleted file mode 100644
index 110a6b60e..000000000
--- a/packages/bits-ui/src/lib/bits/progress/ctx.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { type CreateProgressProps, createProgress } from "@melt-ui/svelte";
-import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-
-function getProgressData() {
-	const NAME = "progress" as const;
-	const PARTS = ["root"] as const;
-
-	return {
-		NAME,
-		PARTS,
-	};
-}
-
-export function setCtx(props: CreateProgressProps) {
-	const { NAME, PARTS } = getProgressData();
-	const getAttrs = createBitAttrs(NAME, PARTS);
-	const progress = { ...createProgress(removeUndefined(props)), getAttrs };
-
-	return {
-		...progress,
-		updateOption: getOptionUpdater(progress.options),
-	};
-}
diff --git a/packages/bits-ui/src/lib/bits/progress/index.ts b/packages/bits-ui/src/lib/bits/progress/index.ts
index f1d2a1a2a..bff7412a1 100644
--- a/packages/bits-ui/src/lib/bits/progress/index.ts
+++ b/packages/bits-ui/src/lib/bits/progress/index.ts
@@ -1,3 +1,3 @@
 export { default as Root } from "./components/progress.svelte";
 
-export type { ProgressProps as Props } from "./types.js";
+export type { ProgressRootProps as RootProps } from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
new file mode 100644
index 000000000..d968bc95f
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
@@ -0,0 +1,53 @@
+import type { BoxedValues, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
+
+type ProgressRootStateProps = ReadonlyBoxedValues<{
+	value: number | null;
+	max: number;
+}>;
+
+class ProgressRootState {
+	#value = undefined as unknown as ProgressRootStateProps["value"];
+	#max = undefined as unknown as ProgressRootStateProps["max"];
+
+	#attrs = $derived({
+		role: "meter",
+		value: this.#value.value,
+		max: this.#max.value,
+		"aria-valuemin": 0,
+		"aria-valuemax": this.#max.value,
+		"aria-valuenow": this.#value.value,
+		"data-value": this.#value.value,
+		"data-state": getProgressDataState(this.#value.value, this.#max.value),
+		"data-max": this.#max.value,
+		"data-bits-progress-root": "",
+	} as const);
+
+	constructor(props: ProgressRootStateProps) {
+		this.#value = props.value;
+		this.#max = props.max;
+	}
+
+	get props() {
+		return this.#attrs;
+	}
+}
+
+//
+// HELPERS
+//
+
+function getProgressDataState(
+	value: number | null,
+	max: number
+): "indeterminate" | "loaded" | "loading" {
+	if (value === null) return "indeterminate";
+	return value === max ? "loaded" : "loading";
+}
+
+//
+// STATE PROVIDERS
+//
+
+export function setProgressRootState(props: ProgressRootStateProps) {
+	return new ProgressRootState(props);
+}
diff --git a/packages/bits-ui/src/lib/bits/progress/types.ts b/packages/bits-ui/src/lib/bits/progress/types.ts
index aecd283dc..e0b5d82a5 100644
--- a/packages/bits-ui/src/lib/bits/progress/types.ts
+++ b/packages/bits-ui/src/lib/bits/progress/types.ts
@@ -1,26 +1,17 @@
-import type { CreateProgressProps as MeltProgressProps } from "@melt-ui/svelte";
-import type {
-	DOMElement,
-	Expand,
-	HTMLDivAttributes,
-	OmitValue,
-	OnChangeFn,
-} from "$lib/internal/index.js";
+import type { PrimitiveDivAttributes, WithAsChild } from "$lib/internal/index.js";
 
-export type ProgressPropsWithoutHTML = Expand<
-	OmitValue<MeltProgressProps> & {
-		/**
-		 * The value of the progress bar.
-		 * You can bind this to a number value to programmatically control the value.
-		 */
-		value?: MeltProgressProps["defaultValue"];
+export type ProgressRootPropsWithoutHTML = WithAsChild<{
+	/**
+	 * The current value of the progress bar.
+	 * If `null`, the progress bar will be in an indeterminate state.
+	 */
+	value?: number | null;
 
-		/**
-		 * A callback function called when the value changes.
-		 */
-		onValueChange?: OnChangeFn<number | null>;
-	} & DOMElement
->;
-//
+	/**
+	 * The maximum value of the progress bar. Used to calculate the percentage
+	 * of the progress bar along with the `value` prop.
+	 */
+	max?: number;
+}>;
 
-export type ProgressProps = ProgressPropsWithoutHTML & HTMLDivAttributes;
+export type ProgressRootProps = ProgressRootPropsWithoutHTML & PrimitiveDivAttributes;