@dryui/ui 0.0.1

package/dist/multi-select-combobox/index.js

@@ -0,0 +1,20 @@
+import MultiSelectComboboxRoot from './multi-select-combobox-root.svelte';
+import MultiSelectComboboxInput from './multi-select-combobox-input.svelte';
+import MultiSelectComboboxContent from './multi-select-combobox-content.svelte';
+import MultiSelectComboboxGroup from './multi-select-combobox-group.svelte';
+import MultiSelectComboboxItem from './multi-select-combobox-item.svelte';
+import MultiSelectComboboxEmpty from './multi-select-combobox-empty.svelte';
+import MultiSelectComboboxSelectionList from './multi-select-combobox-selection-list.svelte';
+import MultiSelectComboboxSelectionItem from './multi-select-combobox-selection-item.svelte';
+import MultiSelectComboboxSelectionRemove from './multi-select-combobox-selection-remove.svelte';
+export const MultiSelectCombobox = {
+    Root: MultiSelectComboboxRoot,
+    Input: MultiSelectComboboxInput,
+    Content: MultiSelectComboboxContent,
+    Group: MultiSelectComboboxGroup,
+    Item: MultiSelectComboboxItem,
+    Empty: MultiSelectComboboxEmpty,
+    SelectionList: MultiSelectComboboxSelectionList,
+    SelectionItem: MultiSelectComboboxSelectionItem,
+    SelectionRemove: MultiSelectComboboxSelectionRemove
+};

package/dist/multi-select-combobox/multi-select-combobox-content.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAnchorPosition } from '@dryui/primitives';
+	import type { Placement } from '@dryui/primitives';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		placement?: Placement;
+		offset?: number;
+		loading?: boolean;
+		loadingContent?: Snippet;
+		children: Snippet;
+	}
+
+	let {
+		class: className,
+		placement = 'bottom-start',
+		offset = 4,
+		loading = false,
+		loadingContent,
+		children,
+		style,
+		...rest
+	}: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+
+	let el = $state<HTMLDivElement | null>(null);
+
+	const anchor = createAnchorPosition(
+		() => ctx.anchorEl,
+		() => el ?? null,
+		{
+			get placement() {
+				return placement;
+			},
+			get offset() {
+				return offset;
+			}
+		}
+	);
+
+	$effect(() => {
+		if (!el) return;
+
+		el.style.cssText = typeof style === 'string' ? style : '';
+		const positionStyles = anchor.styles;
+		for (const [key, value] of Object.entries(positionStyles)) {
+			el.style.setProperty(key, value);
+		}
+	});
+
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
+
+	function syncPopover(isOpen: boolean) {
+		return (node: HTMLDivElement) => {
+			if (isOpen && !node.matches(':popover-open')) {
+				node.showPopover();
+			} else if (!isOpen && node.matches(':popover-open')) {
+				node.hidePopover();
+			}
+		};
+	}
+
+	function dismissOnOutsidePointerDown(node: HTMLDivElement) {
+		function handlePointerDown(event: PointerEvent) {
+			const target = event.target;
+			if (!(target instanceof Node)) {
+				return;
+			}
+
+			if (ctx.anchorEl?.contains(target) || node.contains(target)) {
+				return;
+			}
+
+			ctx.close();
+		}
+
+		document.addEventListener('pointerdown', handlePointerDown);
+		return () => {
+			document.removeEventListener('pointerdown', handlePointerDown);
+		};
+	}
+</script>
+
+<div
+	{@attach attachContent}
+	{@attach syncPopover(ctx.open)}
+	{@attach ctx.open && dismissOnOutsidePointerDown}
+	popover="manual"
+	role="listbox"
+	id={ctx.contentId}
+	aria-labelledby={ctx.inputId}
+	aria-multiselectable="true"
+	data-multi-select-content
+	data-state={ctx.open ? 'open' : 'closed'}
+	class={className}
+	{...rest}
+>
+	{#if loading}
+		<div data-part="loading" role="status" aria-live="polite">
+			{#if loadingContent}
+				{@render loadingContent()}
+			{:else}
+				Loading...
+			{/if}
+		</div>
+	{:else}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	[data-multi-select-content] {
+		inset: unset;
+		margin: 0;
+		background: var(--dry-color-bg-overlay);
+		border: 1px solid var(--dry-color-stroke-weak);
+		border-radius: var(--dry-radius-md);
+		box-shadow: var(--dry-shadow-lg);
+		padding: var(--dry-space-1);
+		max-height: 240px;
+		overflow-y: auto;
+		z-index: 20;
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
+			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
+	}
+
+	[data-multi-select-content]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-multi-select-content]:popover-open {
+		display: grid;
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-multi-select-content]:popover-open {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter))
+				translateY(calc(var(--dry-motion-distance-xs) * -1));
+		}
+	}
+
+	[data-multi-select-content] [data-part='loading'] {
+		display: grid;
+		place-items: center;
+		padding: var(--dry-space-4);
+		color: var(--dry-color-text-weak);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	}
+</style>

package/dist/multi-select-combobox/multi-select-combobox-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MultiSelectComboboxContentProps } from '@dryui/primitives';
+declare const MultiSelectComboboxContent: import('svelte').Component<
+	MultiSelectComboboxContentProps,
+	{},
+	''
+>;
+type MultiSelectComboboxContent = ReturnType<typeof MultiSelectComboboxContent>;
+export default MultiSelectComboboxContent;

package/dist/multi-select-combobox/multi-select-combobox-empty.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+</script>
+
+{#if ctx.itemCount === 0}
+	<div data-multi-select-empty class={className} {...rest}>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	[data-multi-select-empty] {
+		padding: var(--dry-space-4) var(--dry-space-3);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		color: var(--dry-color-text-weak);
+		text-align: center;
+	}
+</style>

package/dist/multi-select-combobox/multi-select-combobox-empty.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MultiSelectComboboxEmptyProps } from '@dryui/primitives';
+declare const MultiSelectComboboxEmpty: import('svelte').Component<
+	MultiSelectComboboxEmptyProps,
+	{},
+	''
+>;
+type MultiSelectComboboxEmpty = ReturnType<typeof MultiSelectComboboxEmpty>;
+export default MultiSelectComboboxEmpty;

package/dist/multi-select-combobox/multi-select-combobox-group.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		label: string;
+		children: Snippet;
+	}
+
+	let { class: className, label, children, ...rest }: Props = $props();
+</script>
+
+<div data-multi-select-group data-part="group" class={className} {...rest}>
+	<div data-part="group-label">{label}</div>
+	{@render children()}
+</div>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	[data-multi-select-group] [data-part='group-label'] {
+		padding: var(--dry-space-1_5) var(--dry-space-2);
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		font-weight: 600;
+		color: var(--dry-color-text-weak);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	[data-multi-select-group] + [data-multi-select-group] {
+		border-top: 1px solid var(--dry-color-stroke-weak);
+		margin-top: var(--dry-space-1);
+		padding-top: var(--dry-space-1);
+	}
+</style>

package/dist/multi-select-combobox/multi-select-combobox-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MultiSelectComboboxGroupProps } from '@dryui/primitives';
+declare const MultiSelectComboboxGroup: import('svelte').Component<
+	MultiSelectComboboxGroupProps,
+	{},
+	''
+>;
+type MultiSelectComboboxGroup = ReturnType<typeof MultiSelectComboboxGroup>;
+export default MultiSelectComboboxGroup;

package/dist/multi-select-combobox/multi-select-combobox-input.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLInputAttributes {
+		placeholder?: string;
+	}
+
+	let {
+		class: className,
+		placeholder = '',
+		oninput,
+		onkeydown,
+		onfocus,
+		...rest
+	}: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+
+	function attachInput(node: HTMLInputElement) {
+		ctx.inputEl = node;
+
+		return () => {
+			if (ctx.inputEl === node) {
+				ctx.inputEl = null;
+			}
+		};
+	}
+
+	function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+		const nextQuery = event.currentTarget.value;
+		ctx.setQuery(nextQuery);
+		ctx.setActiveItem('');
+		if (!ctx.open) {
+			ctx.show();
+		}
+
+		if (oninput) {
+			(oninput as (event: Event & { currentTarget: HTMLInputElement }) => void)(event);
+		}
+	}
+
+	function handleFocus(event: FocusEvent & { currentTarget: HTMLInputElement }) {
+		ctx.show();
+
+		if (onfocus) {
+			(onfocus as (event: FocusEvent & { currentTarget: HTMLInputElement }) => void)(event);
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+		const items = ctx.getEnabledItems();
+		const currentIndex = items.findIndex((item) => item.id === ctx.activeItemId);
+
+		switch (event.key) {
+			case 'ArrowDown': {
+				event.preventDefault();
+				ctx.show();
+
+				if (items.length > 0) {
+					const nextIndex =
+						currentIndex >= 0 && currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+					const nextItem = items[nextIndex];
+					if (nextItem) {
+						ctx.setActiveItem(nextItem.id);
+					}
+				}
+				break;
+			}
+			case 'ArrowUp': {
+				event.preventDefault();
+				ctx.show();
+
+				if (items.length > 0) {
+					const nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+					const nextItem = items[nextIndex];
+					if (nextItem) {
+						ctx.setActiveItem(nextItem.id);
+					}
+				}
+				break;
+			}
+			case 'Enter': {
+				if (!ctx.open || !ctx.activeItemId) {
+					break;
+				}
+
+				const activeItem = items.find((item) => item.id === ctx.activeItemId);
+				if (activeItem) {
+					event.preventDefault();
+					activeItem.click();
+				}
+				break;
+			}
+			case 'Escape': {
+				event.preventDefault();
+				ctx.close();
+				break;
+			}
+			case 'Backspace': {
+				if (event.currentTarget.value === '') {
+					ctx.removeLastValue();
+				}
+				break;
+			}
+			case 'Tab': {
+				ctx.close();
+				break;
+			}
+		}
+
+		if (onkeydown) {
+			(onkeydown as (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => void)(event);
+		}
+	}
+</script>
+
+<input
+	{@attach attachInput}
+	id={ctx.inputId}
+	type="text"
+	role="combobox"
+	aria-expanded={ctx.open}
+	aria-autocomplete="list"
+	aria-controls={ctx.contentId}
+	aria-activedescendant={ctx.activeItemId || undefined}
+	data-multi-select-input
+	data-state={ctx.open ? 'open' : 'closed'}
+	disabled={ctx.disabled || undefined}
+	data-disabled={ctx.disabled || undefined}
+	value={ctx.query}
+	{placeholder}
+	autocomplete="off"
+	class={className}
+	oninput={handleInput}
+	onkeydown={handleKeydown}
+	onfocus={handleFocus}
+	{...rest}
+/>
+
+<style>
+	[data-multi-select-input] {
+		border: none;
+		outline: none;
+		background: transparent;
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		color: var(--dry-color-text-strong);
+		padding: 0;
+		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+	}
+
+	[data-multi-select-input]::placeholder {
+		color: var(--dry-color-text-weak);
+	}
+
+	[data-multi-select-input]:disabled {
+		cursor: not-allowed;
+	}
+
+</style>

package/dist/multi-select-combobox/multi-select-combobox-input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MultiSelectComboboxInputProps } from '@dryui/primitives';
+declare const MultiSelectComboboxInput: import('svelte').Component<
+	MultiSelectComboboxInputProps,
+	{},
+	''
+>;
+type MultiSelectComboboxInput = ReturnType<typeof MultiSelectComboboxInput>;
+export default MultiSelectComboboxInput;

package/dist/multi-select-combobox/multi-select-combobox-item.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { generateFormId } from '@dryui/primitives';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value: string;
+		textValue?: string;
+		disabled?: boolean;
+		icon?: Snippet;
+		children: Snippet;
+	}
+
+	let {
+		class: className,
+		value,
+		textValue,
+		disabled = false,
+		icon,
+		children,
+		onpointerenter,
+		...rest
+	}: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+	const id = generateFormId('multi-select-combobox-item');
+
+	const isSelected = $derived(ctx.isSelected(value));
+	const isUnavailable = $derived(disabled || !ctx.canSelect(value));
+	const isHighlighted = $derived(ctx.activeItemId === id);
+
+	function attachItem(node: HTMLDivElement) {
+		ctx.registerItem(id);
+
+		function handlePointerEnter(event: PointerEvent) {
+			if (!isUnavailable) {
+				ctx.setActiveItem(id);
+			}
+
+			if (onpointerenter) {
+				(onpointerenter as (event: PointerEvent & { currentTarget: HTMLDivElement }) => void)(
+					event as PointerEvent & { currentTarget: HTMLDivElement }
+				);
+			}
+		}
+
+		function handleClick() {
+			if (isUnavailable) {
+				ctx.focusInput();
+				return;
+			}
+
+			ctx.selectValue(value);
+		}
+
+		node.addEventListener('pointerenter', handlePointerEnter);
+		node.addEventListener('click', handleClick);
+
+		return () => {
+			node.removeEventListener('pointerenter', handlePointerEnter);
+			node.removeEventListener('click', handleClick);
+			ctx.unregisterItem(id);
+		};
+	}
+
+	function keepHighlightedItemVisible(node: HTMLDivElement) {
+		node.scrollIntoView({ block: 'nearest' });
+	}
+</script>
+
+<div
+	{@attach attachItem}
+	{@attach isHighlighted && keepHighlightedItemVisible}
+	role="option"
+	{id}
+	tabindex={-1}
+	aria-selected={isSelected}
+	aria-disabled={isUnavailable || undefined}
+	aria-label={textValue || undefined}
+	data-multi-select-item
+	data-value={value}
+	data-text-value={textValue || undefined}
+	data-state={isSelected ? 'selected' : 'unselected'}
+	data-selected={isSelected || undefined}
+	data-highlighted={isHighlighted || undefined}
+	data-disabled={isUnavailable || undefined}
+	class={className}
+	{...rest}
+>
+	{#if icon}
+		<span data-part="icon">{@render icon()}</span>
+	{/if}
+	{@render children()}
+</div>
+
+<style>
+	[data-multi-select-item] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-2) var(--dry-space-3);
+		border-radius: var(--dry-radius-sm);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+		color: var(--dry-color-text-strong);
+		min-height: var(--dry-space-10);
+	}
+
+	[data-multi-select-item]:hover:not([data-disabled]),
+	[data-multi-select-item][data-highlighted] {
+		background: var(--dry-color-fill);
+	}
+
+	[data-multi-select-item][data-state='selected'] {
+		background: var(--dry-color-fill-brand-weak);
+		color: var(--dry-color-text-brand);
+		box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
+	}
+
+	[data-multi-select-item][data-state='selected']:hover:not([data-disabled]),
+	[data-multi-select-item][data-state='selected'][data-highlighted] {
+		background: var(--dry-color-fill-brand-weak);
+	}
+
+	[data-multi-select-item][data-disabled] {
+		background: var(--dry-color-bg-sunken);
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	[data-multi-select-item] [data-part='icon'] {
+		display: inline-grid;
+		align-items: center;
+	}
+</style>

package/dist/multi-select-combobox/multi-select-combobox-item.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MultiSelectComboboxItemProps } from '@dryui/primitives';
+declare const MultiSelectComboboxItem: import('svelte').Component<
+	MultiSelectComboboxItemProps,
+	{},
+	''
+>;
+type MultiSelectComboboxItem = ReturnType<typeof MultiSelectComboboxItem>;
+export default MultiSelectComboboxItem;