feat: Tags Input

docs/src/lib/components/demos/tags-input-demo-contenteditable.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { TagsInput } from "bits-ui";
+	import X from "phosphor-svelte/lib/X";
+
+	let value = $state<string[]>(["hello", "world"]);
+</script>
+
+<div class="flex items-center justify-center">
+	<TagsInput.Root bind:value class="flex flex-col gap-2" delimiters={[","]}>
+		<div
+			class="rounded-card-sm border-border-input bg-background placeholder:text-foreground-alt/50 focus-within:ring-foreground focus-within:ring-offset-background hover:border-dark-40 [&:has([data-invalid])]:border-destructive flex h-auto w-[400px] flex-col gap-4 border p-4 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
+		>
+			<TagsInput.List class="flex min-h-5 flex-wrap gap-1.5">
+				{#each value as tag, index}
+					<TagsInput.Tag value={tag} {index} editMode="contenteditable">
+						<TagsInput.TagContent
+							class="flex items-center gap-3  rounded-[4px] bg-[#FCDAFE] text-[0.7rem] font-semibold leading-none text-[#2A266B] no-underline group-hover:no-underline"
+						>
+							<TagsInput.TagText class="w-full py-1 pl-1.5">
+								{tag}
+							</TagsInput.TagText>
+							<TagsInput.TagRemove
+								class="flex items-center justify-center rounded-r-[4px] border-l border-l-pink-300/50 px-1 py-1 hover:bg-[#edc6f0]"
+							>
+								<X class="size-3" />
+							</TagsInput.TagRemove>
+						</TagsInput.TagContent>
+					</TagsInput.Tag>
+				{/each}
+			</TagsInput.List>
+			<TagsInput.Input
+				class="focus-override bg-transparent focus:outline-none focus:ring-0 "
+				placeholder="Add a tag..."
+				blurBehavior="add"
+			/>
+		</div>
+		<TagsInput.Clear
+			class="h-input rounded-input bg-muted shadow-mini hover:bg-dark-10 focus-visible:ring-foreground focus-visible:ring-offset-background active:scale-98 inline-flex w-full items-center justify-center text-[15px] font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+		>
+			Clear Tags
+		</TagsInput.Clear>
+	</TagsInput.Root>
+</div>

docs/src/lib/components/demos/tags-input-demo.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { TagsInput } from "bits-ui";
+	import X from "phosphor-svelte/lib/X";
+
+	let value = $state<string[]>(["hello", "world"]);
+</script>
+
+<div class="flex items-center justify-center">
+	<TagsInput.Root bind:value class="flex flex-col gap-2" delimiters={[","]}>
+		<div
+			class="rounded-card-sm border-border-input bg-background placeholder:text-foreground-alt/50 focus-within:ring-foreground focus-within:ring-offset-background hover:border-dark-40 [&:has([data-invalid])]:border-destructive flex h-auto w-[400px] flex-col gap-4 border p-4 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
+		>
+			<TagsInput.List class="flex min-h-5 flex-wrap gap-1.5">
+				{#each value as tag, index}
+					<TagsInput.Tag value={tag} {index} editMode="input">
+						<TagsInput.TagContent
+							class="flex items-center gap-3 rounded-[4px] bg-[#FCDAFE] text-[0.7rem] font-semibold leading-none text-[#2A266B] no-underline group-hover:no-underline"
+						>
+							<TagsInput.TagText class="w-full py-1 pl-1.5">
+								{tag}
+							</TagsInput.TagText>
+							<TagsInput.TagRemove
+								class="flex items-center justify-center rounded-r-[4px] border-l border-l-pink-300/50 px-1 py-1 hover:bg-[#edc6f0]"
+							>
+								<X class="size-3" />
+							</TagsInput.TagRemove>
+						</TagsInput.TagContent>
+						<TagsInput.TagEditInput
+							class="border-border-input bg-background placeholder:text-foreground-alt/50 hover:border-dark-40 focus:ring-foreground focus:ring-offset-background inline-flex h-5 w-auto items-center rounded-sm border px-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
+						/>
+					</TagsInput.Tag>
+				{/each}
+			</TagsInput.List>
+			<TagsInput.Input
+				class="focus-override bg-transparent focus:outline-none focus:ring-0 "
+				placeholder="Add a tag..."
+				blurBehavior="add"
+			/>
+		</div>
+		<TagsInput.Clear
+			class="h-input rounded-input bg-muted shadow-mini hover:bg-dark-10 focus-visible:ring-foreground focus-visible:ring-offset-background active:scale-98 inline-flex w-full items-center justify-center text-[15px] font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+		>
+			Clear Tags
+		</TagsInput.Clear>
+	</TagsInput.Root>
+</div>

docs/src/routes/(main)/sink/+page.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import DemoContainer from "$lib/components/demo-container.svelte";
-	import CalendarDemoPresets from "$lib/components/demos/calendar-demo-presets.svelte";
+	import TagsInputDemoContenteditable from "$lib/components/demos/tags-input-demo-contenteditable.svelte";
+	import TagsInputDemo from "$lib/components/demos/tags-input-demo.svelte";
 </script>
 
 <div class="w-full max-w-[756px]">
 	<DemoContainer>
-		<CalendarDemoPresets />
+		<TagsInputDemo />
+	</DemoContainer>
+	<DemoContainer>
+		<TagsInputDemoContenteditable />
 	</DemoContainer>
 </div>

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

@@ -32,6 +32,7 @@ export { Separator } from "./separator/index.js";
 export { Slider } from "./slider/index.js";
 export { Switch } from "./switch/index.js";
 export { Tabs } from "./tabs/index.js";
+export { TagsInput } from "./tags-input/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Toolbar } from "./toolbar/index.js";

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-announcer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import { useTagsInputAnnouncer } from "../tags-input.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+	import {
+		type BitsPrimitiveDivAttributes,
+		type WithChild,
+		type Without,
+		mergeProps,
+	} from "$lib/shared/index.js";
+	import Portal from "$lib/bits/utilities/portal/portal.svelte";
+
+	type Props = WithChild & Without<BitsPrimitiveDivAttributes, WithChild>;
+
+	let { id = useId(), ref = $bindable(null) }: Props = $props();
+
+	const announcerState = useTagsInputAnnouncer({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(announcerState.props));
+</script>
+
+<Portal>
+	<div {...mergedProps}>
+		{#if announcerState.root.message}
+			{announcerState.root.message}
+		{/if}
+	</div>
+</Portal>

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-clear.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { TagsInputClearProps } from "../types.js";
+	import { useTagsInputClear } from "../tags-input.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: TagsInputClearProps = $props();
+
+	const clearState = useTagsInputClear({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, clearState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-input.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { TagsInputInputProps } from "../types.js";
+	import { useTagsInputInput } from "../tags-input.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+	import { noop } from "$lib/internal/noop.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		value = $bindable(""),
+		controlledValue = false,
+		onValueChange = noop,
+		child,
+		blurBehavior = "none",
+		pasteBehavior = "add",
+		...restProps
+	}: TagsInputInputProps = $props();
+
+	const inputState = useTagsInputInput({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: box.with(
+			() => value,
+			(v) => {
+				if (controlledValue) {
+					onValueChange(v);
+				} else {
+					value = v;
+					onValueChange(v);
+				}
+			}
+		),
+		blurBehavior: box.with(() => blurBehavior),
+		pasteBehavior: box.with(() => pasteBehavior),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(restProps, inputState.props, { value: inputState.opts.value.current })
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<input {...mergedProps} bind:value={inputState.opts.value.current} />
+{/if}

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-list.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { TagsInputListProps } from "../types.js";
+	import { useTagsInputList } from "../tags-input.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: TagsInputListProps = $props();
+
+	const listState = useTagsInputList({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, listState.props));
+	const mergedWrapperProps = $derived(mergeProps(listState.gridWrapperProps, {}));
+</script>
+
+<div {...mergedWrapperProps}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag-content.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useTagsInputContent } from "../tags-input.svelte.js";
+	import type { TagsInputTagContentProps } from "../types.js";
+	import { useId } from "$lib/internal/use-id.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: TagsInputTagContentProps = $props();
+
+	const contentState = useTagsInputContent({
+		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/tags-input/components/tags-input-tag-edit-description.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useTagsInputTagEditDescription } from "../tags-input.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+	import type { BitsPrimitiveDivAttributes, WithChild, Without } from "$lib/shared/index.js";
+	import Portal from "$lib/bits/utilities/portal/portal.svelte";
+
+	type Props = WithChild & Without<BitsPrimitiveDivAttributes, WithChild>;
+
+	let { id = useId(), ref = $bindable(null) }: Props = $props();
+
+	const editDescriptionState = useTagsInputTagEditDescription({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(editDescriptionState.props));
+</script>
+
+<Portal>
+	<div {...mergedProps}>
+		{editDescriptionState.description}
+	</div>
+</Portal>

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag-edit-input.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { TagsInputTagEditInputProps } from "../types.js";
+	import { useTagsInputTagEditInput } from "../tags-input.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		...restProps
+	}: TagsInputTagEditInputProps = $props();
+
+	const tagEditState = useTagsInputTagEditInput({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, tagEditState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<input {...mergedProps} />
+{/if}

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag-hidden-input.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import { useTagsInputTagHiddenInput } from "../tags-input.svelte.js";
+
+	const hiddenInputState = useTagsInputTagHiddenInput();
+	const mergedProps = $derived(mergeProps(hiddenInputState.props, {}));
+</script>
+
+{#if hiddenInputState.shouldRender}
+	<input {...mergedProps} />
+{/if}