bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,69 +1,119 @@
-import type { HTMLSelectAttributes } from "svelte/elements";
 import type { Expand } from "svelte-toolbelt";
-import type { PopperLayerProps } from "../utilities/popper-layer/types.js";
+import type { PortalProps } from "../utilities/portal/types.js";
+import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes, PrimitiveSpanAttributes } from "../../shared/attributes.js";
-import type { Direction } from "../../shared/index.js";
-import type { PortalProps } from "../utilities/portal/index.js";
-export type SelectRootPropsWithoutHTML = WithChildren<{
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+export type SelectBaseRootPropsWithoutHTML = WithChildren<{
     /**
-     * The open state of the select.
+     * Whether the combobox is disabled.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /**
+     * Whether the combobox is required (for form submission).
+     *
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * The name to apply to the hidden input element for form submission.
+     * If not provided, a hidden input will not be rendered and the combobox will not be part of a form.
+     */
+    name?: string;
+    /**
+     * Whether the combobox popover is open.
+     *
+     * @defaultValue `false`
+     * @bindable
      */
     open?: boolean;
     /**
-     * A callback that is called when the select's open state changes.
+     * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
     /**
-     * The value of the select.
+     * Whether or not the combobox menu should loop through the items when navigating with the keyboard.
+     *
+     * @defaultValue `false`
      */
-    value?: string;
+    loop?: boolean;
     /**
-     * A callback that is called when the select's value changes.
+     * How to scroll the combobox items into view when navigating with the keyboard.
+     *
+     * @defaultValue `"nearest"`
      */
-    onValueChange?: OnChangeFn<string>;
+    scrollAlignment?: "nearest" | "center";
     /**
-     * The reading direction of the select.
+     * Optionally provide an array of `value` and `label` pairs that will be used to match
+     * and trigger selection when the trigger is focused and a key is pressed while the content
+     * is closed. It's also used to handle form autofill.
+     *
+     * By providing this value, you enable selecting a value when the trigger is focused and a key
+     * is pressed without the content being open, similar to how a native `<select>` works.
+     * For this to work, you must
+     *
+     * The label is what the user will potentially search for via typeahead, and the value is what
+     * is set as the selected value when a typeahead match is found.
+     *
+     * We can't rely on the individual `Item` components to do this because they may not ever be
+     * mounted to do the DOM if using a conditional block with a Svelte transition or certain
+     * animation libraries.
+     *
+     * IMPORTANT: This functionality is only available for single-select listboxes.
      */
-    dir?: Direction;
+    items?: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
     /**
-     * The name of the select used in form submission.
+     * Whether to allow the user to deselect an item by clicking on an already selected item.
+     * This is only applicable to `type="single"` selects/comboboxes.
      */
-    name?: string;
+    allowDeselect?: boolean;
+}>;
+export type SelectSingleRootPropsWithoutHTML = {
     /**
-     * The native HTML select autocomplete attribute.
+     * The value of the selected combobox item.
+     *
+     * @bindable
      */
-    autocomplete?: HTMLSelectAttributes["autocomplete"];
+    value?: string;
     /**
-     * The native HTML select `form` attribute.
+     * A callback function called when the value changes.
      */
-    form?: string;
+    onValueChange?: OnChangeFn<string>;
     /**
-     * Whether the select is disabled.
+     * The type of combobox.
+     *
+     * @required
      */
-    disabled?: boolean;
+    type: "single";
+};
+export type SelectMultipleRootPropsWithoutHTML = {
     /**
-     * Whether the select is required.
+     * The value of the selected combobox item.
+     *
+     * @bindable
      */
-    required?: boolean;
+    value?: string[];
     /**
-     * Whether or not the open state is controlled or not. If `true`, the component will not update
-     * the open state internally, instead it will call `onOpenChange` when it would have
-     * otherwise, and it is up to you to update the `open` prop that is passed to the component.
-     *
-     * @defaultValue false
+     * A callback function called when the value changes.
      */
-    controlledOpen?: boolean;
+    onValueChange?: OnChangeFn<string[]>;
     /**
-     * Whether or not the value state is controlled or not. If `true`, the component will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
+     * The type of combobox.
      *
-     * @defaultValue false
+     * @required
      */
-    controlledValue?: boolean;
-}>;
+    type: "multiple";
+};
+export type SelectSingleRootProps = SelectBaseRootPropsWithoutHTML & SelectSingleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectSingleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+export type SelectMultipleRootProps = SelectBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectMultipleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+export type SelectRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML & (SelectSingleRootPropsWithoutHTML | SelectMultipleRootPropsWithoutHTML);
 export type SelectRootProps = SelectRootPropsWithoutHTML;
 export type _SharedSelectContentProps = {
     /**
@@ -73,79 +123,61 @@ export type _SharedSelectContentProps = {
      */
     loop?: boolean;
 };
-export type SelectContentImplPropsWithoutHTML = Expand<WithChild<Omit<PopperLayerProps, "content"> & {
-    /**
-     *  The positioning mode to use
-     *
-     *  `item-aligned` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>
-     *  `floating  (default)` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
-     */
-    position?: "item-aligned" | "floating";
-} & _SharedSelectContentProps>>;
-export type SelectContentImplProps = SelectContentImplPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectContentImplPropsWithoutHTML>;
-export type SelectContentPropsWithoutHTML = SelectContentImplPropsWithoutHTML & {
-    /**
-     * Whether to force mount the content for use with certain animation libraries.
-     */
-    forceMount?: boolean;
-};
-export type SelectContentProps = SelectContentPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
+export type SelectContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, FloatingContentSnippetProps>>;
+export type SelectContentProps = SelectContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
+export type SelectContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, StaticContentSnippetProps>>;
+export type SelectContentStaticProps = SelectContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentStaticPropsWithoutHTML>;
+export type SelectTriggerPropsWithoutHTML = WithChild;
+export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
 export type SelectItemSnippetProps = {
     selected: boolean;
+    highlighted: boolean;
 };
 export type SelectItemPropsWithoutHTML = WithChild<{
     /**
      * The value of the item.
+     *
+     * @required
      */
     value: string;
     /**
-     * Whether the item is disabled.
-     *
-     * @defaultValue false
+     * The label of the item. If provided, this is the item that users will search for.
+     * If not provided, the value will be used as the label.
      */
-    disabled?: boolean;
+    label?: string;
     /**
-     * Optionally provide text to use for typeahead purposes.
+     * Whether the item is disabled.
      *
-     * By default, the typeahead behavior will use the `textContent` of the `SelectItemText`
-     * component. Use this prop if the text content is not suitable for typeahead.
+     * @defaultValue `false`
      */
-    textValue?: string;
-}, SelectItemSnippetProps>;
-export type SelectItemProps = SelectItemPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
-export type SelectTriggerPropsWithoutHTML = WithChild<{
+    disabled?: boolean;
     /**
-     * Whether the trigger is disabled.
-     *
-     * @defaultValue false
+     * A callback function called when the item is highlighted. This can be used as a
+     * replacement for `onfocus` since we don't actually focus the item and instead
+     * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
      */
-    disabled?: boolean | null | undefined;
-}>;
-export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
-export type SelectValuePropsWithoutHTML = WithChild<{
+    onHighlight?: () => void;
     /**
-     * The content to render inside the `Select.Value` when no `value` is set.
+     * A callback function called when the item is unhighlighted. This can be used as a
+     * replacement for `onblur` since we don't actually focus the item and instead
+     * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
      */
-    placeholder?: string;
-}>;
-export type SelectValueProps = SelectValuePropsWithoutHTML & Without<Omit<PrimitiveSpanAttributes, "id">, SelectValuePropsWithoutHTML>;
-export type SelectItemTextPropsWithoutHTML = WithChild;
-export type SelectItemTextProps = SelectItemTextPropsWithoutHTML & Without<PrimitiveSpanAttributes, SelectItemTextPropsWithoutHTML>;
-export type SelectViewportPropsWithoutHTML = WithChild;
-export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
-export type SelectPortalPropsWithoutHTML = PortalProps;
-export type SelectPortalProps = SelectPortalPropsWithoutHTML;
-export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
-export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
-export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
-export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;
-export type SelectIconPropsWithoutHTML = WithChild;
-export type SelectIconProps = SelectIconPropsWithoutHTML & Without<PrimitiveSpanAttributes, SelectIconPropsWithoutHTML>;
+    onUnhighlight?: () => void;
+}, SelectItemSnippetProps>;
+export type SelectItemProps = SelectItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
 export type SelectGroupPropsWithoutHTML = WithChild;
-export type SelectGroupProps = SelectGroupPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
+export type SelectGroupProps = SelectGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
 export type SelectGroupHeadingPropsWithoutHTML = WithChild;
-export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
+export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
 export type SelectSeparatorPropsWithoutHTML = WithChild;
-export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
+export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
+export type SelectPortalPropsWithoutHTML = PortalProps;
+export type SelectPortalProps = SelectPortalPropsWithoutHTML;
 export type SelectArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type SelectArrowProps = ArrowProps;
+export type SelectViewportPropsWithoutHTML = WithChild;
+export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
+export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
+export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
+export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
+export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;

package/dist/bits/separator/components/separator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSeparatorRoot } from "../separator.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { SeparatorRootProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -13,7 +12,7 @@
 		decorative = false,
 		orientation = "horizontal",
 		...restProps
-	}: RootProps = $props();
+	}: SeparatorRootProps = $props();
 
 	const rootState = useSeparatorRoot({
 		ref: box.with(

package/dist/bits/separator/components/separator.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.js";
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Separator: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type Separator = InstanceType<typeof Separator>;
+import type { SeparatorRootProps } from "../types.js";
+declare const Separator: import("svelte").Component<SeparatorRootProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
 export default Separator;

package/dist/bits/separator/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/separator.svelte";
+export type { SeparatorRootProps as RootProps } from "./types.js";

package/dist/bits/separator/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/separator.svelte";

package/dist/bits/separator/index.d.ts

@@ -1,2 +1 @@
-export { default as Root } from "./components/separator.svelte";
-export type { SeparatorRootProps as RootProps } from "./types.js";
+export * as Separator from "./exports.js";

package/dist/bits/separator/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/separator.svelte";
+export * as Separator from "./exports.js";

package/dist/bits/separator/separator.svelte.js

@@ -1,5 +1,5 @@
+import { useRefById } from "svelte-toolbelt";
 import { getAriaHidden, getAriaOrientation, getDataOrientation } from "../../internal/attrs.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 const ROOT_ATTR = "data-separator-root";
 class SeparatorRootState {
     #id;

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

@@ -1,6 +1,6 @@
 import type { WithChild, Without } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type SeparatorRootPropsWithoutHTML = WithChild<{
     /**
      * The orientation of the separator.
@@ -15,4 +15,4 @@ export type SeparatorRootPropsWithoutHTML = WithChild<{
      */
     decorative?: boolean;
 }>;
-export type SeparatorRootProps = SeparatorRootPropsWithoutHTML & Without<PrimitiveDivAttributes, SeparatorRootPropsWithoutHTML>;
+export type SeparatorRootProps = SeparatorRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SeparatorRootPropsWithoutHTML>;

package/dist/bits/slider/components/slider-range.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RangeProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderRangeProps } from "../types.js";
 	import { useSliderRange } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -11,7 +10,7 @@
 		ref = $bindable(null),
 		id = useId(),
 		...restProps
-	}: RangeProps = $props();
+	}: SliderRangeProps = $props();
 
 	const rangeState = useSliderRange({
 		id: box.with(() => id),

package/dist/bits/slider/components/slider-range.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { RangeProps } from "../index.js";
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SliderRange: $$__sveltets_2_IsomorphicComponent<RangeProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SliderRange = InstanceType<typeof SliderRange>;
+import type { SliderRangeProps } from "../types.js";
+declare const SliderRange: import("svelte").Component<SliderRangeProps, {}, "ref">;
+type SliderRange = ReturnType<typeof SliderRange>;
 export default SliderRange;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ThumbProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderThumbProps } from "../types.js";
 	import { useSliderThumb } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -13,7 +12,7 @@
 		index,
 		disabled = false,
 		...restProps
-	}: ThumbProps = $props();
+	}: SliderThumbProps = $props();
 
 	const thumbState = useSliderThumb({
 		id: box.with(() => id),

package/dist/bits/slider/components/slider-thumb.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { ThumbProps } from "../index.js";
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SliderThumb: $$__sveltets_2_IsomorphicComponent<ThumbProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SliderThumb = InstanceType<typeof SliderThumb>;
+import type { SliderThumbProps } from "../types.js";
+declare const SliderThumb: import("svelte").Component<SliderThumbProps, {}, "ref">;
+type SliderThumb = ReturnType<typeof SliderThumb>;
 export default SliderThumb;

package/dist/bits/slider/components/slider-tick.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { TickProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderTickProps } from "../types.js";
 	import { useSliderTick } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -12,7 +11,7 @@
 		id = useId(),
 		index,
 		...restProps
-	}: TickProps = $props();
+	}: SliderTickProps = $props();
 
 	const tickState = useSliderTick({
 		id: box.with(() => id),

package/dist/bits/slider/components/slider-tick.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { TickProps } from "../index.js";
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SliderTick: $$__sveltets_2_IsomorphicComponent<TickProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SliderTick = InstanceType<typeof SliderTick>;
+import type { SliderTickProps } from "../types.js";
+declare const SliderTick: import("svelte").Component<SliderTickProps, {}, "ref">;
+type SliderTick = ReturnType<typeof SliderTick>;
 export default SliderTick;

package/dist/bits/slider/components/slider.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps, type WritableBox } from "svelte-toolbelt";
+	import type { SliderRootProps } from "../types.js";
 	import { useSliderRoot } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { noop } from "../../../internal/callbacks.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
 		child,
 		id = useId(),
 		ref = $bindable(null),
-		value = $bindable([]),
+		value = $bindable(),
+		type,
 		onValueChange = noop,
-		onValueChangeEnd = noop,
+		onValueCommit = noop,
 		disabled = false,
 		min = 0,
 		max = 100,
@@ -21,9 +21,12 @@
 		dir = "ltr",
 		autoSort = true,
 		orientation = "horizontal",
-		controlledValue = false,
 		...restProps
-	}: RootProps = $props();
+	}: SliderRootProps = $props();
+
+	if (value === undefined) {
+		value = type === "single" ? 0 : [];
+	}
 
 	const rootState = useSliderRoot({
 		id: box.with(() => id),
@@ -34,15 +37,13 @@
 		value: box.with(
 			() => value,
 			(v) => {
-				if (controlledValue) {
-					onValueChange(v);
-				} else {
-					value = v;
-					onValueChange(v);
-				}
+				value = v;
+				// @ts-expect-error - we know
+				onValueChange(v);
 			}
-		),
-		onValueChangeEnd: box.with(() => onValueChangeEnd),
+		) as WritableBox<number> | WritableBox<number[]>,
+		// @ts-expect-error - we know
+		onValueCommit: box.with(() => onValueCommit),
 		disabled: box.with(() => disabled),
 		min: box.with(() => min),
 		max: box.with(() => max),
@@ -50,6 +51,7 @@
 		dir: box.with(() => dir),
 		autoSort: box.with(() => autoSort),
 		orientation: box.with(() => orientation),
+		type,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/slider/components/slider.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.js";
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Slider: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "ref">;
-type Slider = InstanceType<typeof Slider>;
+import type { SliderRootProps } from "../types.js";
+declare const Slider: import("svelte").Component<SliderRootProps, {}, "value" | "ref">;
+type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/slider.svelte";
+export { default as Range } from "./components/slider-range.svelte";
+export { default as Thumb } from "./components/slider-thumb.svelte";
+export { default as Tick } from "./components/slider-tick.svelte";
+export type { SliderRootProps as RootProps, SliderRangeProps as RangeProps, SliderThumbProps as ThumbProps, SliderTickProps as TickProps, } from "./types.js";

package/dist/bits/slider/exports.js

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/slider.svelte";
+export { default as Range } from "./components/slider-range.svelte";
+export { default as Thumb } from "./components/slider-thumb.svelte";
+export { default as Tick } from "./components/slider-tick.svelte";

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

@@ -1,5 +1 @@
-export { default as Root } from "./components/slider.svelte";
-export { default as Range } from "./components/slider-range.svelte";
-export { default as Thumb } from "./components/slider-thumb.svelte";
-export { default as Tick } from "./components/slider-tick.svelte";
-export type { SliderRootProps as RootProps, SliderRangeProps as RangeProps, SliderThumbProps as ThumbProps, SliderTickProps as TickProps, } from "./types.js";
+export * as Slider from "./exports.js";

package/dist/bits/slider/index.js

@@ -1,4 +1 @@
-export { default as Root } from "./components/slider.svelte";
-export { default as Range } from "./components/slider-range.svelte";
-export { default as Thumb } from "./components/slider-thumb.svelte";
-export { default as Tick } from "./components/slider-tick.svelte";
+export * as Slider from "./exports.js";