@human-kit/svelte-components 1.0.0-alpha.1

package/dist/combobox/list/combobox-listbox.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" generics="T extends object = object">
+	import type { ComponentProps, Snippet } from 'svelte';
+	import { useComboBoxContext } from '../root/context';
+	import { ListBoxRoot as ListBox, type ListBoxContext } from '../../listbox';
+
+	/**
+	 * ComboBox.ListBox - The list wrapper with selection management.
+	 * Extends ListBox props, controlling selection internally.
+	 * Supports both static children and dynamic items rendering.
+	 */
+	type ComboBoxListBoxProps = Omit<
+		ComponentProps<typeof ListBox>,
+		// Props controlled internally by ComboBox
+		| 'selectionMode'
+		| 'selectionBehavior'
+		| 'value'
+		| 'defaultValue'
+		| 'onChange'
+		| 'context'
+		| 'element'
+		| 'children'
+		| 'items'
+		| 'id'
+	> & {
+		/** Optional items for dynamic rendering - overrides items from ComboBox context */
+		items?: Iterable<T>;
+		/** Content of the listbox. Receives item in dynamic mode. */
+		children?: Snippet<[T]> | Snippet;
+	};
+
+	let {
+		'aria-label': ariaLabel = 'Options',
+		children,
+		items,
+		...props
+	}: ComboBoxListBoxProps = $props();
+
+	const ctx = useComboBoxContext();
+	let listboxCtx: ListBoxContext | undefined = $state();
+	let listboxElement: HTMLElement | undefined = $state();
+
+	// Wire listbox context to combobox context when available
+	$effect(() => {
+		if (listboxCtx) {
+			ctx.setListboxCtx(listboxCtx);
+		}
+	});
+
+	// Wire listbox element ref to combobox context
+	$effect(() => {
+		if (listboxElement) {
+			ctx.setListboxRef(listboxElement);
+		}
+	});
+
+	function handleSelectionChange(selection: Set<string | number>) {
+		const selectedId = Array.from(selection)[0];
+		if (selectedId !== undefined) {
+			const label = ctx.itemLabels.get(selectedId) ?? String(selectedId);
+			ctx.select(selectedId, label);
+		}
+	}
+</script>
+
+<ListBox
+	{...props}
+	bind:context={listboxCtx}
+	bind:element={listboxElement}
+	id={`combobox-listbox-${ctx.instanceId}`}
+	items={items ?? (ctx.items as T[] | undefined)}
+	{children}
+	selectionMode={ctx.selectionMode}
+	value={ctx.selectedValue}
+	onChange={handleSelectionChange}
+	aria-label={ariaLabel}
+/>

package/dist/combobox/list/combobox-listbox.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import { type ListBoxContext } from '../../listbox';
+declare function $$render<T extends object = object>(): {
+    props: Omit<{
+        selectionBehavior?: "toggle" | "replace";
+        emptyPlaceholder?: string | Snippet;
+        items?: Iterable<object> | undefined;
+        disabledIds?: Iterable<string | number>;
+        selectionMode?: "single" | "multiple";
+        value?: Iterable<string | number>;
+        defaultValue?: Iterable<string | number>;
+        children?: Snippet<[]> | Snippet<[object]> | undefined;
+        class?: string;
+        id?: string;
+        'aria-label'?: string;
+        onChange?: ((value: Set<string | number>) => void) | undefined;
+    } & {
+        context?: ListBoxContext;
+        element?: HTMLElement;
+    }, "selectionMode" | "selectionBehavior" | "id" | "value" | "defaultValue" | "onChange" | "items" | "children" | "context" | "element"> & {
+        /** Optional items for dynamic rendering - overrides items from ComboBox context */
+        items?: Iterable<T>;
+        /** Content of the listbox. Receives item in dynamic mode. */
+        children?: Snippet<[T]> | Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object = object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object = object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object = object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ComboboxListbox: $$IsomorphicComponent;
+type ComboboxListbox<T extends object = object> = InstanceType<typeof ComboboxListbox<T>>;
+export default ComboboxListbox;

package/dist/combobox/popover/combobox-popover.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useComboBoxContext } from '../root/context';
+	import { Popover } from '../../popover';
+
+	/**
+	 * ComboBox.Popover - Just the floating container wrapper.
+	 * Should contain ComboBox.ListBox as a child.
+	 */
+	type ComboBoxPopoverProps = {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className = '', children }: ComboBoxPopoverProps = $props();
+
+	const ctx = useComboBoxContext();
+
+	function handleOpenChange(open: boolean) {
+		ctx.onOpenChange(open);
+	}
+
+	/**
+	 * Prevent wheel/scroll events from propagating to the page
+	 * This keeps the page from scrolling when scrolling over the popover
+	 * But allows internal scrolling when the popover has overflow
+	 */
+	function handleWheel(event: WheelEvent) {
+		const element = event.currentTarget as HTMLElement;
+		if (!element) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = element;
+		const isScrollingDown = event.deltaY > 0;
+		const isScrollingUp = event.deltaY < 0;
+
+		// Check if we can scroll in the direction of the wheel
+		const canScrollDown = scrollTop < scrollHeight - clientHeight;
+		const canScrollUp = scrollTop > 0;
+
+		// If we can scroll internally in this direction, allow it
+		if ((isScrollingDown && canScrollDown) || (isScrollingUp && canScrollUp)) {
+			// Allow internal scroll, but stop propagation to page
+			event.stopPropagation();
+		} else {
+			// Can't scroll internally, prevent both default and propagation
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	}
+
+	$effect(() => {
+		if (ctx.isOpen) {
+			ctx.inputRef?.focus();
+		}
+	});
+</script>
+
+<Popover.Root open={ctx.isOpen} triggerRef={ctx.triggerRef} onOpenChange={handleOpenChange}>
+	<Popover.Content
+		isNonModal={true}
+		placement="bottom-start"
+		class={className}
+		onwheel={handleWheel}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</Popover.Content>
+</Popover.Root>

package/dist/combobox/popover/combobox-popover.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+/**
+ * ComboBox.Popover - Just the floating container wrapper.
+ * Should contain ComboBox.ListBox as a child.
+ */
+type ComboBoxPopoverProps = {
+    class?: string;
+    children?: Snippet;
+};
+declare const ComboboxPopover: import("svelte").Component<ComboBoxPopoverProps, {}, "">;
+type ComboboxPopover = ReturnType<typeof ComboboxPopover>;
+export default ComboboxPopover;

package/dist/combobox/root/combobox-filtered-test.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import ComboBox from '../index';
+
+	type Props = {
+		onInputChange?: (value: string) => void;
+		trigger?: 'focus' | 'input' | 'press';
+	};
+
+	let { onInputChange, trigger = 'focus' }: Props = $props();
+
+	const countries = [
+		{ id: 'ar', name: 'Argentina' },
+		{ id: 'br', name: 'Brazil' },
+		{ id: 'ca', name: 'Canada' },
+		{ id: 'fr', name: 'France' },
+		{ id: 'de', name: 'Germany' },
+		{ id: 'it', name: 'Italy' },
+		{ id: 'jp', name: 'Japan' },
+		{ id: 'mx', name: 'Mexico' },
+		{ id: 'es', name: 'Spain' },
+		{ id: 'us', name: 'United States' }
+	];
+
+	let filterValue = $state('');
+	let selectedValue = $state<string | number | undefined>();
+
+	const filteredCountries = $derived(
+		filterValue === ''
+			? countries
+			: countries.filter((c) => c.name.toLowerCase().includes(filterValue.toLowerCase()))
+	);
+
+	function handleInputChange(val: string) {
+		filterValue = val;
+		onInputChange?.(val);
+	}
+</script>
+
+<ComboBox.Root bind:value={selectedValue} {trigger} onInputChange={handleInputChange}>
+	<ComboBox.Input placeholder="Search countries..." />
+
+	<ComboBox.Popover>
+		<ComboBox.List emptyPlaceholder="No countries found">
+			{#each filteredCountries as country (country.id)}
+				<ComboBox.Item id={country.id} textValue={country.name}>
+					{country.name}
+				</ComboBox.Item>
+			{/each}
+		</ComboBox.List>
+	</ComboBox.Popover>
+</ComboBox.Root>

package/dist/combobox/root/combobox-filtered-test.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onInputChange?: (value: string) => void;
+    trigger?: 'focus' | 'input' | 'press';
+};
+declare const ComboboxFilteredTest: import("svelte").Component<Props, {}, "">;
+type ComboboxFilteredTest = ReturnType<typeof ComboboxFilteredTest>;
+export default ComboboxFilteredTest;

package/dist/combobox/root/combobox-multiselect-test.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import ComboBox from '../index.js';
+
+	interface Props {
+		items?: { id: string; name: string }[];
+		value?: (string | number)[];
+		onValueChange?: (value: (string | number)[]) => void;
+		trigger?: 'focus' | 'input' | 'press';
+		closeOnSelect?: boolean;
+	}
+
+	let {
+		items = [
+			{ id: 'apple', name: 'Apple' },
+			{ id: 'banana', name: 'Banana' },
+			{ id: 'cherry', name: 'Cherry' },
+			{ id: 'date', name: 'Date' },
+			{ id: 'elderberry', name: 'Elderberry' }
+		],
+		value = $bindable([]),
+		onValueChange,
+		trigger = 'press',
+		closeOnSelect = false
+	}: Props = $props();
+
+	function handleChange(newValue: string | number | (string | number)[] | undefined) {
+		if (Array.isArray(newValue)) {
+			onValueChange?.(newValue);
+		}
+	}
+</script>
+
+<ComboBox.Root
+	bind:value
+	selectionMode="multiple"
+	{trigger}
+	{closeOnSelect}
+	onChange={handleChange}
+>
+	<div class="combobox-container">
+		<ComboBox.Tags>
+			{#snippet children({ item })}
+				<ComboBox.Tag>
+					{item.label}
+					<ComboBox.TagRemove />
+				</ComboBox.Tag>
+			{/snippet}
+		</ComboBox.Tags>
+		<ComboBox.Input placeholder="Search fruits..." />
+		<ComboBox.Button>▼</ComboBox.Button>
+	</div>
+
+	<ComboBox.Popover>
+		<ComboBox.List>
+			{#each items as item (item.id)}
+				<ComboBox.Item id={item.id} textValue={item.name}>
+					{item.name}
+					<ComboBox.ItemIndicator />
+				</ComboBox.Item>
+			{/each}
+		</ComboBox.List>
+	</ComboBox.Popover>
+</ComboBox.Root>
+
+<style>
+	.combobox-container {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 4px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		padding: 4px;
+		min-height: 38px;
+	}
+</style>

package/dist/combobox/root/combobox-multiselect-test.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    items?: {
+        id: string;
+        name: string;
+    }[];
+    value?: (string | number)[];
+    onValueChange?: (value: (string | number)[]) => void;
+    trigger?: 'focus' | 'input' | 'press';
+    closeOnSelect?: boolean;
+}
+declare const ComboboxMultiselectTest: import("svelte").Component<Props, {}, "value">;
+type ComboboxMultiselectTest = ReturnType<typeof ComboboxMultiselectTest>;
+export default ComboboxMultiselectTest;

package/dist/combobox/root/combobox-numeric-string-id-test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ComboBox } from '../index';
+
+	let selected = $state<string | number | undefined>();
+</script>
+
+<ComboBox.Root bind:value={selected}>
+	<ComboBox.Input placeholder="Search codes..." />
+	<ComboBox.Button />
+
+	<ComboBox.Popover>
+		<ComboBox.List emptyPlaceholder="No codes found">
+			<ComboBox.Item id="01" textValue="Code 01">Code 01</ComboBox.Item>
+			<ComboBox.Item id="02" textValue="Code 02">Code 02</ComboBox.Item>
+		</ComboBox.List>
+	</ComboBox.Popover>
+</ComboBox.Root>
+
+<div data-testid="selected">{selected === undefined ? '' : String(selected)}</div>
+<div data-testid="selected-type">{selected === undefined ? '' : typeof selected}</div>

package/dist/combobox/root/combobox-numeric-string-id-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ComboboxNumericStringIdTest: import("svelte").Component<Record<string, never>, {}, "">;
+type ComboboxNumericStringIdTest = ReturnType<typeof ComboboxNumericStringIdTest>;
+export default ComboboxNumericStringIdTest;

package/dist/combobox/root/combobox-test.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import ComboBox from '../index';
+
+	type Props = {
+		id?: string;
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		trigger?: 'focus' | 'input' | 'press';
+	};
+
+	let { id, isDisabled = false, isReadOnly = false, trigger = 'press' }: Props = $props();
+
+	const countries = [
+		{ id: 'ar', name: 'Argentina' },
+		{ id: 'br', name: 'Brazil' },
+		{ id: 'ca', name: 'Canada' },
+		{ id: 'fr', name: 'France' },
+		{ id: 'de', name: 'Germany' },
+		{ id: 'it', name: 'Italy' },
+		{ id: 'jp', name: 'Japan' },
+		{ id: 'mx', name: 'Mexico' },
+		{ id: 'es', name: 'Spain' },
+		{ id: 'us', name: 'United States' }
+	];
+</script>
+
+<ComboBox.Root {id} {isDisabled} {isReadOnly} {trigger}>
+	<ComboBox.Input placeholder="Search countries..." />
+	<ComboBox.Button />
+
+	<ComboBox.Popover>
+		<ComboBox.List emptyPlaceholder="No countries found">
+			{#each countries as country (country.id)}
+				<ComboBox.Item id={country.id} textValue={country.name}>
+					{country.name}
+				</ComboBox.Item>
+			{/each}
+		</ComboBox.List>
+	</ComboBox.Popover>
+</ComboBox.Root>
+
+<!-- Button outside the combobox for testing blur behavior -->
+<button type="button" data-testid="outside-button">Outside</button>

package/dist/combobox/root/combobox-test.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    id?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    trigger?: 'focus' | 'input' | 'press';
+};
+declare const ComboboxTest: import("svelte").Component<Props, {}, "">;
+type ComboboxTest = ReturnType<typeof ComboboxTest>;
+export default ComboboxTest;