bits-ui 1.8.0 → 2.1.0

package/dist/bits/slider/types.d.ts

@@ -1,36 +1,88 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
 import type { BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
 import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
+export type TickItem = {
+    /**
+     * The value this tick represents
+     */
+    value: number;
+    /**
+     * The index of this tick in the array of ticks provided by the `children`
+     * or `child` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+};
+export type ThumbItem = {
+    /**
+     * The value this thumb represents
+     */
+    value: number;
+    /**
+     * The index of this thumb in the array of thumbs provided by the `children`
+     * or `child` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+};
+export type SliderLabelPosition = "top" | "bottom" | "left" | "right";
 export type SliderRootSnippetProps = {
+    /**
+     * Use `tickItems` instead. Will be removed in Bits UI v3.
+     *
+     * The indices of the ticks.
+     *
+     * @deprecated Use `tickItems` instead.
+     */
     ticks: number[];
+    /**
+     * Use `thumbItems` instead. Will be removed in Bits UI v3.
+     *
+     * The indices of the thumbs.
+     *
+     * @deprecated Use `thumbItems` instead
+     */
     thumbs: number[];
+    /**
+     * An array of objects containing the value and index of each tick, useful for
+     * rendering ticks along with labels for each tick.
+     */
+    tickItems: TickItem[];
+    /**
+     * An array of objects containing the value and index of each thumb, useful for
+     * rendering thumbs along with labels for each thumb.
+     */
+    thumbItems: ThumbItem[];
 };
 export type BaseSliderRootPropsWithoutHTML = {
     /**
      * Whether to automatically sort the values in the array when moving thumbs past
      * one another.
      *
-     * @defaultValue true
+     * @default true
      */
     autoSort?: boolean;
     /**
      * The minimum value of the slider.
      *
-     * @defaultValue 0
+     * @default 0 (for number step) or the min value of the step array (for array step)
      */
     min?: number;
     /**
      * The maximum value of the slider.
      *
-     * @defaultValue 100
+     * @default 100 (for number step) or the max value of the step array (for array step)
      */
     max?: number;
     /**
-     * The amount to increment the value by when the user presses the arrow keys.
+     * The amount to increment the value by when the user presses the arrow keys,
+     * or an array of specific values that the slider can snap to.
+     *
+     * When an array is provided, the slider will only allow values that exist in the array,
+     * creating discrete tick points. The array values should be within the min/max range
+     * and will be automatically sorted.
      *
-     * @defaultValue 1
+     * @default 1
      */
-    step?: number;
+    step?: number | number[];
     /**
      * The direction of the slider.
      *
@@ -38,27 +90,35 @@ export type BaseSliderRootPropsWithoutHTML = {
      * from the top and move downwards. For horizontal sliders, setting `dir` to `'rtl'`
      * will cause the slider to start from the left and move rightwards.
      *
-     * @defaultValue 'ltr'
+     * @default 'ltr'
      */
     dir?: Direction;
     /**
      * The orientation of the slider.
      *
-     * @defaultValue "horizontal"
+     * @default "horizontal"
      */
     orientation?: Orientation;
     /**
      * Whether the slider is disabled or not.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
      * The positioning of the slider thumb.
      *
-     * @defaultValue "contain"
+     * @default "contain"
      */
     thumbPositioning?: SliderThumbPositioning;
+    /**
+     * Padding percentage for the track. Creates space before the first
+     * and after the last tick positions.
+     *
+     * This can also be used as an SSR-friendly alternative to `thumbPositioning="contain"`,
+     * which requires client-side measurement.
+     */
+    trackPadding?: number;
 };
 export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
     /**
@@ -71,6 +131,8 @@ export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML &
     /**
      * The value of the slider.
      * @bindable
+     *
+     * @default min
      */
     value?: number;
     /**
@@ -119,7 +181,7 @@ export type SliderThumbPropsWithoutHTML = WithChild<{
     /**
      * Whether the thumb is disabled or not.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -137,3 +199,35 @@ export type SliderTickPropsWithoutHTML = WithChild<{
     index: number;
 }>;
 export type SliderTickProps = SliderTickPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderTickPropsWithoutHTML>;
+export type SliderTickLabelPropsWithoutHTML = WithChild<{
+    /**
+     * The index of the tick the label represents in the array of ticks
+     * provided by the  `children` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+    /**
+     * The position of the label relative to the tick.
+     * For horizontal sliders: "top" | "bottom"
+     * For vertical sliders: "left" | "right"
+     *
+     * @default for horizontal sliders = "top" and for vertical sliders = "left"
+     */
+    position?: SliderLabelPosition;
+}>;
+export type SliderTickLabelProps = SliderTickLabelPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderTickLabelPropsWithoutHTML>;
+export type SliderThumbLabelPropsWithoutHTML = WithChild<{
+    /**
+     * The index of the thumb the label represents in the array of thumbs
+     * provided by the `children` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+    /**
+     * The position of the label relative to the thumb.
+     * For horizontal sliders: "top" | "bottom"
+     * For vertical sliders: "left" | "right"
+     *
+     * @default for horizontal sliders = "top" and for vertical sliders = "left"
+     */
+    position?: SliderLabelPosition;
+}>;
+export type SliderThumbLabelProps = SliderThumbLabelPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderThumbLabelPropsWithoutHTML>;

package/dist/bits/switch/components/switch-thumb.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SwitchThumbProps } from "../types.js";
 	import { useSwitchThumb } from "../switch.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: SwitchThumbProps = $props();
 

package/dist/bits/switch/components/switch.svelte

@@ -3,14 +3,16 @@
 	import type { SwitchRootProps } from "../types.js";
 	import { useSwitchRoot } from "../switch.svelte.js";
 	import SwitchInput from "./switch-input.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		required = false,
 		checked = $bindable(false),

package/dist/bits/switch/switch.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getAriaChecked, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -8,7 +8,6 @@ class SwitchRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
         this.onclick = this.onclick.bind(this);
     }
@@ -45,6 +44,7 @@ class SwitchRootState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SwitchInputState {
@@ -68,7 +68,6 @@ class SwitchThumbState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     snippetProps = $derived.by(() => ({
         checked: this.root.opts.checked.current,
@@ -77,6 +76,7 @@ class SwitchThumbState {
         ...this.root.sharedProps,
         id: this.opts.id.current,
         [SWITCH_THUMB_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 const SwitchRootContext = new Context("Switch.Root");

package/dist/bits/tabs/components/tabs-content.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TabsContentProps } from "../types.js";
 	import { useTabsContent } from "../tabs.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value,
 		...restProps

package/dist/bits/tabs/components/tabs-list.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TabsListProps } from "../types.js";
 	import { useTabsList } from "../tabs.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: TabsListProps = $props();

package/dist/bits/tabs/components/tabs-trigger.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TabsTriggerProps } from "../types.js";
 	import { useTabsTrigger } from "../tabs.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		children,
 		disabled = false,
-		id = useId(),
+		id = createId(uid),
 		type = "button",
 		value,
 		ref = $bindable(null),

package/dist/bits/tabs/components/tabs.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TabsRootProps } from "../types.js";
 	import { useTabsRoot } from "../tabs.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,

package/dist/bits/tabs/tabs.svelte.js

@@ -1,5 +1,5 @@
 import { SvelteMap } from "svelte/reactivity";
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -18,10 +18,9 @@ class TabsRootState {
     valueToContentId = new SvelteMap();
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
         this.rovingFocusGroup = useRovingFocus({
             candidateAttr: TABS_TRIGGER_ATTR,
-            rootNodeId: this.opts.id,
+            rootNode: this.opts.ref,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
@@ -49,6 +48,7 @@ class TabsRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [TABS_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class TabsListState {
@@ -58,7 +58,6 @@ class TabsListState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -67,6 +66,7 @@ class TabsListState {
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         [TABS_LIST_ATTR]: "",
         "data-disabled": getDataDisabled(this.#isDisabled),
+        ...attachRef(this.opts.ref),
     }));
 }
 class TabsTriggerState {
@@ -79,7 +79,6 @@ class TabsTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
             return this.root.registerTrigger(id, value);
         });
@@ -137,6 +136,7 @@ class TabsTriggerState {
         onclick: this.onclick,
         onfocus: this.onfocus,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class TabsContentState {
@@ -147,7 +147,6 @@ class TabsContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
             return this.root.registerContent(id, value);
         });
@@ -161,6 +160,7 @@ class TabsContentState {
         "data-state": getTabDataState(this.#isActive),
         "aria-labelledby": this.#ariaLabelledBy,
         [TABS_CONTENT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 const TabsRootContext = new Context("Tabs.Root");

package/dist/bits/time-field/components/time-field-hidden-input.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { useTimeFieldHiddenInput } from "../time-field.svelte.js";
+	import HiddenInput from "../../utilities/hidden-input.svelte";
+
+	const hiddenInputState = useTimeFieldHiddenInput();
+</script>
+
+{#if hiddenInputState.shouldRender}
+	<HiddenInput {...hiddenInputState.props} />
+{/if}

package/dist/bits/{date-field/components/date-field-error.svelte.d.ts → time-field/components/time-field-hidden-input.svelte.d.ts}

@@ -1,18 +1,5 @@
-export default DateFieldError;
-type DateFieldError = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const DateFieldError: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const TimeFieldHiddenInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TimeFieldHiddenInput = InstanceType<typeof TimeFieldHiddenInput>;
+export default TimeFieldHiddenInput;

package/dist/bits/time-field/components/time-field-input.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useTimeFieldInput } from "../time-field.svelte.js";
+	import type { TimeFieldInputProps } from "../types.js";
+	import DateFieldHiddenInput from "./time-field-hidden-input.svelte";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		name = "",
+		children,
+		child,
+		...restProps
+	}: TimeFieldInputProps = $props();
+
+	const inputState = useTimeFieldInput({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		name: box.with(() => name),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, inputState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, segments: inputState.root.segmentContents })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.({ segments: inputState.root.segmentContents })}
+	</div>
+{/if}
+
+<DateFieldHiddenInput />

package/dist/bits/time-field/components/time-field-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TimeFieldInputProps } from "../types.js";
+declare const TimeFieldInput: import("svelte").Component<TimeFieldInputProps, {}, "ref">;
+type TimeFieldInput = ReturnType<typeof TimeFieldInput>;
+export default TimeFieldInput;

package/dist/bits/time-field/components/time-field-label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useTimeFieldLabel } from "../time-field.svelte.js";
+	import type { TimeFieldLabelProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: TimeFieldLabelProps = $props();
+
+	const labelState = useTimeFieldLabel({
+		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}

package/dist/bits/time-field/components/time-field-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TimeFieldLabelProps } from "../types.js";
+declare const TimeFieldLabel: import("svelte").Component<TimeFieldLabelProps, {}, "ref">;
+type TimeFieldLabel = ReturnType<typeof TimeFieldLabel>;
+export default TimeFieldLabel;

package/dist/bits/time-field/components/time-field-segment.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useTimeFieldSegment } from "../time-field.svelte.js";
+	import type { TimeFieldSegmentProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		child,
+		part,
+		...restProps
+	}: TimeFieldSegmentProps = $props();
+
+	const segmentState = useTimeFieldSegment(part, {
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(restProps, segmentState.props as Record<string, unknown>)
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/bits/time-field/components/time-field-segment.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TimeFieldSegmentProps } from "../types.js";
+declare const TimeFieldSegment: import("svelte").Component<TimeFieldSegmentProps, {}, "ref">;
+type TimeFieldSegment = ReturnType<typeof TimeFieldSegment>;
+export default TimeFieldSegment;

package/dist/bits/time-field/components/time-field.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import type { TimeValue } from "../../../shared/date/types.js";
+	import type { Time } from "@internationalized/date";
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T extends TimeValue = Time">
+	import { box } from "svelte-toolbelt";
+	import { useTimeFieldRoot } from "../time-field.svelte.js";
+	import type { TimeFieldRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
+	import { getDefaultTime } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
+
+	let {
+		disabled = false,
+		granularity,
+		hideTimeZone = false,
+		hourCycle,
+		locale = "en",
+		maxValue,
+		minValue,
+		onPlaceholderChange = noop,
+		onValueChange = noop,
+		validate = noop,
+		onInvalid = noop,
+		placeholder = $bindable(),
+		value = $bindable(),
+		readonly = false,
+		readonlySegments = [],
+		required = false,
+		errorMessageId,
+		children,
+	}: TimeFieldRootProps<T> = $props();
+
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
+
+		const defaultPlaceholder = getDefaultTime({
+			granularity,
+			defaultValue: value,
+		});
+
+		placeholder = defaultPlaceholder;
+	}
+
+	// SSR
+	handleDefaultPlaceholder();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make placeholder
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
+	useTimeFieldRoot({
+		value: box.with(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			}
+		),
+		placeholder: box.with(
+			() => placeholder as TimeValue,
+			(v) => {
+				placeholder = v;
+				onPlaceholderChange(v);
+			}
+		),
+		disabled: box.with(() => disabled),
+		granularity: box.with(() => granularity),
+		hideTimeZone: box.with(() => hideTimeZone),
+		hourCycle: box.with(() => hourCycle),
+		locale: box.with(() => locale),
+		maxValue: box.with(() => maxValue),
+		minValue: box.with(() => minValue),
+		validate: box.with(() => validate),
+		readonly: box.with(() => readonly),
+		readonlySegments: box.with(() => readonlySegments),
+		required: box.with(() => required),
+		onInvalid: box.with(() => onInvalid),
+		errorMessageId: box.with(() => errorMessageId),
+		isInvalidProp: box.with(() => undefined),
+	});
+</script>
+
+{@render children?.()}