@johly/bits-ui 2.18.1

package/dist/bits/command/components/_command-label.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import { CommandLabelState } from "../command.svelte.js";
+
+	import type { WithChildren } from "../../../internal/types.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { BitsPrimitiveLabelAttributes, WithElementRef } from "../../../shared/index.js";
+
+	const uid = $props.id();
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithChildren<WithElementRef<BitsPrimitiveLabelAttributes>> = $props();
+
+	const labelState = CommandLabelState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, labelState.props));
+</script>
+
+<label {...mergedProps}>
+	{@render children?.()}
+</label>

package/dist/bits/command/components/_command-label.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithChildren } from "../../../internal/types.js";
+import type { BitsPrimitiveLabelAttributes, WithElementRef } from "../../../shared/index.js";
+declare const CommandLabel: import("svelte").Component<WithChildren<WithElementRef<BitsPrimitiveLabelAttributes>>, {}, "ref">;
+type CommandLabel = ReturnType<typeof CommandLabel>;
+export default CommandLabel;

package/dist/bits/command/components/command-empty.svelte

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

package/dist/bits/command/components/command-empty.svelte.d.ts

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

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

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

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

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

package/dist/bits/command/components/command-group-items.svelte

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

package/dist/bits/command/components/command-group-items.svelte.d.ts

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

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

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

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

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

package/dist/bits/command/components/command-input.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CommandInputProps } from "../types.js";
+	import { CommandInputState } from "../command.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		value = $bindable(""),
+		autofocus = false,
+		id = createId(uid),
+		ref = $bindable(null),
+		child,
+		...restProps
+	}: CommandInputProps = $props();
+
+	const inputState = CommandInputState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+			}
+		),
+		autofocus: boxWith(() => autofocus ?? false),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, inputState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<input {...mergedProps} bind:value />
+{/if}

package/dist/bits/command/components/command-input.svelte.d.ts

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

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CommandItemProps } from "../types.js";
+	import { CommandItemState } from "../command.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = "",
+		disabled = false,
+		children,
+		child,
+		onSelect = noop,
+		forceMount = false,
+		keywords = [],
+		...restProps
+	}: CommandItemProps = $props();
+
+	const itemState = CommandItemState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		forceMount: boxWith(() => forceMount),
+		keywords: boxWith(() => keywords),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#key itemState.root.key}
+	<div style="display: contents;" data-item-wrapper data-value={itemState.trueValue}>
+		{#if itemState.shouldRender}
+			{#if child}
+				{@render child({ props: mergedProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/if}
+	</div>
+{/key}

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

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

package/dist/bits/command/components/command-link-item.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CommandLinkItemProps } from "../types.js";
+	import { CommandItemState } from "../command.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = "",
+		disabled = false,
+		children,
+		child,
+		onSelect = noop,
+		forceMount = false,
+		keywords = [],
+		...restProps
+	}: CommandLinkItemProps = $props();
+
+	const itemState = CommandItemState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		forceMount: boxWith(() => forceMount),
+		keywords: boxWith(() => keywords),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#key itemState.root.key}
+	<div style="display: contents;">
+		{#if itemState.shouldRender}
+			{#if child}
+				{@render child({ props: mergedProps })}
+			{:else}
+				<a {...mergedProps}>
+					{@render children?.()}
+				</a>
+			{/if}
+		{/if}
+	</div>
+{/key}

package/dist/bits/command/components/command-link-item.svelte.d.ts

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

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CommandListProps } from "../types.js";
+	import { CommandListState } from "../command.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		child,
+		children,
+		"aria-label": ariaLabel,
+		...restProps
+	}: CommandListProps = $props();
+
+	const listState = CommandListState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		ariaLabel: boxWith(() => ariaLabel ?? "Suggestions..."),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, listState.props));
+</script>
+
+{#key listState.root._commandState.search === ""}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/key}

package/dist/bits/command/components/command-list.svelte.d.ts

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

package/dist/bits/command/components/command-loading.svelte

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

package/dist/bits/command/components/command-loading.svelte.d.ts

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

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

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

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

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

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

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

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

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