@johly/bits-ui 2.18.1

package/dist/bits/scroll-area/types.d.ts

@@ -0,0 +1,47 @@
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { Direction, Orientation, WithChild, Without } from "../../shared/index.js";
+export type ScrollAreaType = "hover" | "scroll" | "auto" | "always";
+export type ScrollAreaRootPropsWithoutHTML = WithChild<{
+    /**
+     * The type of scroll area to render.
+     *
+     * @defaultValue "hover"
+     */
+    type?: ScrollAreaType;
+    /**
+     * The reading direction of the application.
+     */
+    dir?: Direction;
+    /**
+     * The amount of time in milliseconds to delay before hiding the scrollbars
+     * after leaving the scroll area or stopping scrolling.
+     *
+     * @defaultValue 600
+     */
+    scrollHideDelay?: number;
+}>;
+export type ScrollAreaRootProps = ScrollAreaRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaRootPropsWithoutHTML>;
+export type ScrollAreaViewportPropsWithoutHTML = Omit<WithChild, "child">;
+export type ScrollAreaViewportProps = ScrollAreaViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaViewportPropsWithoutHTML>;
+export type ScrollAreaScrollbarPropsWithoutHTML = WithChild<{
+    orientation: Orientation;
+    /**
+     * Whether to forcefully mount the component. Useful when working with
+     * external animation/transition libraries.
+     */
+    forceMount?: boolean;
+}>;
+export type ScrollAreaScrollbarProps = ScrollAreaScrollbarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaScrollbarPropsWithoutHTML>;
+export type ScrollAreaThumbPropsWithoutHTML = WithChild<{
+    /**
+     * Whether to forcefully mount the component. Useful when working with
+     * external animation/transition libraries.
+     */
+    forceMount?: boolean;
+}>;
+export type ScrollAreaThumbProps = ScrollAreaThumbPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaThumbPropsWithoutHTML>;
+export type ScrollAreaCornerPropsWithoutHTML = WithChild;
+export type ScrollAreaCornerProps = ScrollAreaCornerPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaCornerPropsWithoutHTML>;
+export type _ScrollbarStubProps = Omit<ScrollAreaScrollbarProps, "orientation" | "ref" | "id"> & {
+    id: string;
+};

package/dist/bits/scroll-area/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/select/components/select-content-static.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { SelectContentStaticProps } from "../types.js";
+	import { SelectContentState } from "../select.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		forceMount = false,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		children,
+		child,
+		preventScroll = false,
+		style,
+		...restProps
+	}: SelectContentStaticProps = $props();
+
+	const contentState = SelectContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		isStatic
+		enabled={contentState.root.opts.open.current}
+		{id}
+		{preventScroll}
+		forceMount={true}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		isStatic
+		open={contentState.root.opts.open.current}
+		{id}
+		{preventScroll}
+		forceMount={false}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/select/components/select-content-static.svelte.d.ts

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

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { SelectContentProps } from "../types.js";
+	import { SelectContentState } from "../select.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		forceMount = false,
+		side = "bottom",
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		children,
+		child,
+		preventScroll = false,
+		style,
+		...restProps
+	}: SelectContentProps = $props();
+
+	const contentState = SelectContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		{side}
+		enabled={contentState.root.opts.open.current}
+		{id}
+		{preventScroll}
+		forceMount={true}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		{side}
+		open={contentState.root.opts.open.current}
+		{id}
+		{preventScroll}
+		forceMount={false}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/select/components/select-content.svelte.d.ts

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

package/dist/bits/select/components/select-group-heading.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { SelectGroupHeadingProps } from "../types.js";
+	import { SelectGroupHeadingState } from "../select.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: SelectGroupHeadingProps = $props();
+
+	const groupHeadingState = SelectGroupHeadingState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, groupHeadingState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/select/components/select-group-heading.svelte.d.ts

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

package/dist/bits/select/components/select-group.svelte

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

package/dist/bits/select/components/select-group.svelte.d.ts

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

package/dist/bits/select/components/select-hidden-input.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import { SelectHiddenInputState } from "../select.svelte.js";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import HiddenInput from "../../utilities/hidden-input.svelte";
+
+	let {
+		value = $bindable(),
+		autocomplete,
+	}: { value?: string } & Omit<HTMLInputAttributes, "value"> = $props();
+
+	const hiddenInputState = SelectHiddenInputState.create({
+		value: boxWith(() => value),
+	});
+</script>
+
+{#if hiddenInputState.shouldRender}
+	<HiddenInput {...hiddenInputState.props} bind:value {autocomplete} />
+{/if}

package/dist/bits/select/components/select-hidden-input.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type $$ComponentProps = {
+    value?: string;
+} & Omit<HTMLInputAttributes, "value">;
+declare const SelectHiddenInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SelectHiddenInput = ReturnType<typeof SelectHiddenInput>;
+export default SelectHiddenInput;

package/dist/bits/select/components/select-item.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { SelectItemState } from "../select.svelte.js";
+	import type { SelectItemProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import Mounted from "../../utilities/mounted.svelte";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value,
+		label = value,
+		disabled = false,
+		children,
+		child,
+		onHighlight = noop,
+		onUnhighlight = noop,
+		...restProps
+	}: SelectItemProps = $props();
+
+	const itemState = SelectItemState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		label: boxWith(() => label),
+		onHighlight: boxWith(() => onHighlight),
+		onUnhighlight: boxWith(() => onUnhighlight),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...itemState.snippetProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.(itemState.snippetProps)}
+	</div>
+{/if}
+
+<Mounted bind:mounted={itemState.mounted} />

package/dist/bits/select/components/select-item.svelte.d.ts

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

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { SelectScrollDownButtonProps } from "../types.js";
+	import { SelectScrollDownButtonState } from "../select.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { Mounted } from "../../utilities/index.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		delay = () => 50,
+		child,
+		children,
+		...restProps
+	}: SelectScrollDownButtonProps = $props();
+
+	const scrollButtonState = SelectScrollDownButtonState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		delay: boxWith(() => delay),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));
+</script>
+
+{#if scrollButtonState.canScrollDown}
+	<Mounted bind:mounted={scrollButtonState.scrollButtonState.mounted} />
+	{#if child}
+		{@render child({ props: restProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/if}

package/dist/bits/select/components/select-scroll-down-button.svelte.d.ts

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

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { SelectScrollUpButtonProps } from "../types.js";
+	import { SelectScrollUpButtonState } from "../select.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { Mounted } from "../../utilities/index.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		delay = () => 50,
+		child,
+		children,
+		...restProps
+	}: SelectScrollUpButtonProps = $props();
+
+	const scrollButtonState = SelectScrollUpButtonState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		delay: boxWith(() => delay),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));
+</script>
+
+{#if scrollButtonState.canScrollUp}
+	<Mounted bind:mounted={scrollButtonState.scrollButtonState.mounted} />
+	{#if child}
+		{@render child({ props: restProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/if}

package/dist/bits/select/components/select-scroll-up-button.svelte.d.ts

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

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { SelectTriggerState } from "../select.svelte.js";
+	import type { SelectTriggerProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		child,
+		children,
+		type = "button",
+		...restProps
+	}: SelectTriggerProps = $props();
+
+	const triggerState = SelectTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
+</script>
+
+<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+</FloatingLayer.Anchor>

package/dist/bits/select/components/select-trigger.svelte.d.ts

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

package/dist/bits/select/components/select-value.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { SelectValueState } from "../select.svelte.js";
+	import type { SelectValueProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		placeholder,
+		child,
+		children,
+		...restProps
+	}: SelectValueProps = $props();
+
+	const valueState = SelectValueState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		placeholder: boxWith(() => placeholder),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, valueState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...valueState.snippetProps })}
+{:else}
+	<span {...mergedProps}>
+		{#if children}
+			{@render children?.(valueState.snippetProps)}
+		{:else if valueState.snippetProps.selection.type === "single"}
+			{valueState.snippetProps.selection.selected?.label ?? placeholder}
+		{:else if valueState.snippetProps.selection.type === "multiple" && valueState.snippetProps.selection.selected}
+			{valueState.snippetProps.selection.selected.length > 0
+				? valueState.snippetProps.selection.selected
+						.map((selected) => selected.label)
+						.join(", ")
+				: placeholder}
+		{:else}
+			{placeholder}
+		{/if}
+	</span>
+{/if}

package/dist/bits/select/components/select-value.svelte.d.ts

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

package/dist/bits/select/components/select-viewport.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { SelectViewportProps } from "../types.js";
+	import { SelectViewportState } from "../select.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: SelectViewportProps = $props();
+
+	const viewportState = SelectViewportState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
+
+<style>
+	/* Hide scrollbars cross browser and enable momentum scroll for touch devices */
+	:global([data-select-viewport]) {
+		scrollbar-width: none !important;
+		-ms-overflow-style: none !important;
+		-webkit-overflow-scrolling: touch !important;
+	}
+
+	:global([data-combobox-viewport]) {
+		scrollbar-width: none !important;
+		-ms-overflow-style: none !important;
+		-webkit-overflow-scrolling: touch !important;
+	}
+
+	:global([data-combobox-viewport])::-webkit-scrollbar {
+		display: none !important;
+	}
+	:global([data-select-viewport])::-webkit-scrollbar {
+		display: none !important;
+	}
+</style>

package/dist/bits/select/components/select-viewport.svelte.d.ts

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