next: Slider (#607)

NOTICE.txt

@@ -0,0 +1,25 @@
+Bits UI
+=================
+The following is a list of sources from which code was used/modified in this codebase.
+
+-------------------------------------------------------------------------------
+This codebase contains a modified portion of code from Adobe which can be obtained at:
+  * SOURCE:
+    * https://www.npmjs.com/package/@react-aria/utils
+  * LICENSE:
+    * https://unpkg.com/@react-aria/utils@3.24.1/LICENSE
+
+  * SOURCE:
+    * https://www.npmjs.com/package/react-stately
+  * LICENSE:
+    * https://unpkg.com/react-stately@3.31.1/LICENSE
+
+-------------------------------------------------------------------------------
+
+This codebase contains a modified portion of code from Melt UI which can be obtained at:
+  * SOURCE:
+    * https://www.npmjs.com/package/@melt-ui/svelte
+  * LICENSE:
+    * https://unpkg.com/@melt-ui/svelte@0.76.2/LICENSE
+
+-------------------------------------------------------------------------------

packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts

@@ -1,6 +1,7 @@
 import {
 	type Box,
 	type ReadableBoxedValues,
+	type WithRefProps,
 	type WritableBoxedValues,
 	afterTick,
 	getAriaDisabled,
@@ -25,15 +26,13 @@ const ACCORDION_HEADER_ATTR = "data-accordion-header";
 // BASE
 //
 
-type AccordionBaseStateProps = ReadableBoxedValues<{
-	id: string;
-	disabled: boolean;
-	orientation: Orientation;
-	loop: boolean;
-}> &
-	WritableBoxedValues<{
-		ref: HTMLElement | null;
-	}>;
+type AccordionBaseStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		disabled: boolean;
+		orientation: Orientation;
+		loop: boolean;
+	}>
+>;
 
 class AccordionBaseState {
 	#id: AccordionBaseStateProps["id"];
@@ -130,15 +129,14 @@ export class AccordionMultiState extends AccordionBaseState {
 // ITEM
 //
 
-type AccordionItemStateProps = ReadableBoxedValues<{
-	value: string;
-	disabled: boolean;
-	id: string;
-}> & {
-	rootState: AccordionState;
-} & WritableBoxedValues<{
-		ref: HTMLElement | null;
-	}>;
+type AccordionItemStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		value: string;
+		disabled: boolean;
+	}> & {
+		rootState: AccordionState;
+	}
+>;
 
 export class AccordionItemState {
 	#id: AccordionItemStateProps["id"];
@@ -190,13 +188,11 @@ export class AccordionItemState {
 // TRIGGER
 //
 
-type AccordionTriggerStateProps = ReadableBoxedValues<{
-	disabled: boolean;
-	id: string;
-}> &
-	WritableBoxedValues<{
-		ref: HTMLElement | null;
-	}>;
+type AccordionTriggerStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		disabled: boolean;
+	}>
+>;
 
 class AccordionTriggerState {
 	#ref: AccordionTriggerStateProps["ref"];
@@ -259,14 +255,11 @@ class AccordionTriggerState {
 // CONTENT
 //
 
-type AccordionContentStateProps = ReadableBoxedValues<{
-	forceMount: boolean;
-	id: string;
-}> &
-	WritableBoxedValues<{
-		ref: HTMLElement | null;
-	}>;
-
+type AccordionContentStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		forceMount: boolean;
+	}>
+>;
 class AccordionContentState {
 	item: AccordionItemState;
 	#ref: AccordionContentStateProps["ref"];
@@ -348,13 +341,11 @@ class AccordionContentState {
 	);
 }
 
-type AccordionHeaderStateProps = ReadableBoxedValues<{
-	level: 1 | 2 | 3 | 4 | 5 | 6;
-	id: string;
-}> &
-	WritableBoxedValues<{
-		ref: HTMLElement | null;
-	}>;
+type AccordionHeaderStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		level: 1 | 2 | 3 | 4 | 5 | 6;
+	}>
+>;
 
 class AccordionHeaderState {
 	#id: AccordionHeaderStateProps["id"];
@@ -394,18 +385,16 @@ class AccordionHeaderState {
 
 type AccordionState = AccordionSingleState | AccordionMultiState;
 
-type InitAccordionProps = {
-	type: "single" | "multiple";
-	value: Box<string> | Box<string[]>;
-} & ReadableBoxedValues<{
-	id: string;
-	disabled: boolean;
-	orientation: Orientation;
-	loop: boolean;
-}> &
-	WritableBoxedValues<{
-		ref: HTMLElement | null;
-	}>;
+type InitAccordionProps = WithRefProps<
+	{
+		type: "single" | "multiple";
+		value: Box<string> | Box<string[]>;
+	} & ReadableBoxedValues<{
+		disabled: boolean;
+		orientation: Orientation;
+		loop: boolean;
+	}>
+>;
 
 const [setAccordionRootContext, getAccordionRootContext] =
 	createContext<AccordionState>("Accordion.Root");

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { CancelProps } from "../index.js";
-	import { useAlertDialogCancel } from "$lib/bits/date-range-picker/dialog/dialog.svelte.js";
+	import { useAlertDialogCancel } from "$lib/bits/dialog/dialog.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -10,7 +10,7 @@
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { noop } from "$lib/internal/callbacks.js";
 	import ScrollLock from "$lib/bits/utilities/scroll-lock/scroll-lock.svelte";
-	import { useDialogContent } from "$lib/bits/date-range-picker/dialog/dialog.svelte.js";
+	import { useDialogContent } from "$lib/bits/dialog/dialog.svelte.js";
 
 	let {
 		id = useId(),

packages/bits-ui/src/lib/bits/index.ts

@@ -18,6 +18,7 @@ export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Label from "./label/index.js";
 export * as LinkPreview from "./link-preview/index.js";
+export * as Listbox from "./listbox/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as NavigationMenu from "./navigation-menu/index.js";
 export * as Pagination from "./pagination/index.js";

packages/bits-ui/src/lib/bits/listbox/components/listbox-content.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { ContentProps } from "../index.js";
+	import { useListboxContent } from "../listbox.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = useId(),
+		...restProps
+	}: ContentProps = $props();
+
+	const contentState = useListboxContent({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if child}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

packages/bits-ui/src/lib/bits/listbox/components/listbox-group-label.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { GroupLabelProps } from "../index.js";
+	import { useListboxGroupLabel } from "../listbox.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = useId(),
+		...restProps
+	}: GroupLabelProps = $props();
+
+	const groupLabelState = useListboxGroupLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, groupLabelState.props));
+</script>
+
+{#if child}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

packages/bits-ui/src/lib/bits/listbox/components/listbox-group.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { GroupProps } from "../index.js";
+	import { useListboxGroup } from "../listbox.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		children,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		...restProps
+	}: GroupProps = $props();
+
+	const groupState = useListboxGroup({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, groupState.props));
+</script>
+
+{#if child}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

packages/bits-ui/src/lib/bits/listbox/components/listbox-item.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { ItemProps } from "../index.js";
+	import { useListboxItem } from "../listbox.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		children,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		value,
+		disabled = false,
+		label = "",
+		...restProps
+	}: ItemProps = $props();
+
+	const itemState = useListboxItem({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: box.with(
+			() => value,
+			(v) => {
+				value = v;
+			}
+		),
+		disabled: box.with(() => disabled),
+		label: box.with(() => label),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#if child}
+	{@render child?.({ props: mergedProps, selected: itemState.isSelected })}
+{:else}
+	<div {...mergedProps}>
+		{#if children}
+			{@render children?.({ selected: itemState.isSelected })}
+		{:else if label}
+			{label}
+		{/if}
+	</div>
+{/if}

packages/bits-ui/src/lib/bits/listbox/components/listbox-label.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { LabelProps } from "../index.js";
+	import { useListboxLabel } from "../listbox.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = useId(),
+		...restProps
+	}: LabelProps = $props();
+
+	const labelState = useListboxLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, labelState.props));
+</script>
+
+{#if child}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}