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

package/dist/listbox/root/context.js

@@ -0,0 +1,249 @@
+import { setContext, getContext } from 'svelte';
+import { createKeyboardNavigation } from '../../primitives/keyboard-navigation';
+const KEY = Symbol('listbox');
+export function createListBoxContext(options = {}) {
+    const { selectionMode = 'single', selectionBehavior = 'toggle', disabledIds: initialDisabledIds, initialSelection = new Set(), onSelectionChange } = options;
+    const disabledIds = new Set(initialDisabledIds ?? []);
+    const items = new Map();
+    let selectedKeys = new Set(initialSelection);
+    const itemCallbacks = new Map();
+    // Item count tracking with subscription
+    const itemCountCallbacks = new Set();
+    function notifyItemCountChange() {
+        const count = items.size;
+        itemCountCallbacks.forEach((cb) => cb(count));
+    }
+    function registerItem(id, textValue, element) {
+        items.set(id, { textValue, element });
+        notifyItemCountChange();
+    }
+    function unregisterItem(id) {
+        items.delete(id);
+        itemCallbacks.delete(id);
+        notifyItemCountChange();
+    }
+    function getItemCount() {
+        return items.size;
+    }
+    function subscribeToItemCount(callback) {
+        itemCountCallbacks.add(callback);
+        // Immediately call with current count
+        callback(items.size);
+        return () => {
+            itemCountCallbacks.delete(callback);
+        };
+    }
+    function getItemIds() {
+        return Array.from(items.keys());
+    }
+    function isDisabled(id) {
+        return disabledIds.has(id);
+    }
+    function isSelected(id) {
+        return selectedKeys.has(id);
+    }
+    function getSelectedKeys() {
+        return new Set(selectedKeys);
+    }
+    function notifyItem(id, selected) {
+        const callbacks = itemCallbacks.get(id);
+        if (callbacks) {
+            callbacks.forEach((cb) => cb(selected));
+        }
+    }
+    let focusedId = null;
+    const focusCallbacks = new Map();
+    function getFocusedId() {
+        return focusedId;
+    }
+    function isFocused(id) {
+        return focusedId === id || String(focusedId) === String(id);
+    }
+    function notifyFocus(id, focused) {
+        const callbacks = focusCallbacks.get(id);
+        if (callbacks) {
+            callbacks.forEach((cb) => cb(focused));
+        }
+    }
+    function setFocusedId(newId) {
+        if (focusedId === newId)
+            return;
+        const previousId = focusedId;
+        focusedId = newId;
+        if (previousId !== null) {
+            notifyFocus(previousId, false);
+        }
+        if (newId !== null) {
+            notifyFocus(newId, true);
+        }
+    }
+    function subscribeToFocus(id, callback) {
+        if (!focusCallbacks.has(id)) {
+            focusCallbacks.set(id, new Set());
+        }
+        focusCallbacks.get(id).add(callback);
+        callback(isFocused(id));
+        return () => {
+            const callbacks = focusCallbacks.get(id);
+            if (callbacks) {
+                callbacks.delete(callback);
+                if (callbacks.size === 0) {
+                    focusCallbacks.delete(id);
+                }
+            }
+        };
+    }
+    function subscribeToItem(id, callback) {
+        if (!itemCallbacks.has(id)) {
+            itemCallbacks.set(id, new Set());
+        }
+        itemCallbacks.get(id).add(callback);
+        callback(selectedKeys.has(id));
+        return () => {
+            const callbacks = itemCallbacks.get(id);
+            if (callbacks) {
+                callbacks.delete(callback);
+                if (callbacks.size === 0) {
+                    itemCallbacks.delete(id);
+                }
+            }
+        };
+    }
+    function select(id) {
+        if (isDisabled(id))
+            return;
+        const wasSelected = selectedKeys.has(id);
+        const previouslySelected = new Set(selectedKeys);
+        if (selectionMode === 'single') {
+            if (selectionBehavior === 'toggle') {
+                selectedKeys = wasSelected ? new Set() : new Set([id]);
+            }
+            else {
+                selectedKeys = new Set([id]);
+            }
+        }
+        else {
+            selectedKeys = new Set(selectedKeys);
+            if (selectionBehavior === 'toggle') {
+                if (wasSelected) {
+                    selectedKeys.delete(id);
+                }
+                else {
+                    selectedKeys.add(id);
+                }
+            }
+            else {
+                selectedKeys.add(id);
+            }
+        }
+        previouslySelected.forEach((prevId) => {
+            if (!selectedKeys.has(prevId)) {
+                notifyItem(prevId, false);
+            }
+        });
+        selectedKeys.forEach((newId) => {
+            if (!previouslySelected.has(newId)) {
+                notifyItem(newId, true);
+            }
+        });
+        onSelectionChange?.(new Set(selectedKeys));
+    }
+    function selectAll() {
+        if (selectionMode !== 'multiple')
+            return;
+        const enabledIds = getItemIds().filter((id) => !isDisabled(id));
+        const previouslySelected = new Set(selectedKeys);
+        selectedKeys = new Set(enabledIds);
+        enabledIds.forEach((id) => {
+            if (!previouslySelected.has(id)) {
+                notifyItem(id, true);
+            }
+        });
+        onSelectionChange?.(new Set(selectedKeys));
+    }
+    function setSelection(newSelection) {
+        const previouslySelected = new Set(selectedKeys);
+        selectedKeys = new Set(newSelection);
+        previouslySelected.forEach((prevId) => {
+            if (!selectedKeys.has(prevId)) {
+                notifyItem(prevId, false);
+            }
+        });
+        selectedKeys.forEach((newId) => {
+            if (!previouslySelected.has(newId)) {
+                notifyItem(newId, true);
+            }
+        });
+    }
+    // Navigation helper functions for virtual focus (used by ComboBox)
+    const loop = false; // Same as keyboardNav loop setting
+    function getNextItemId(currentId) {
+        const itemIdsList = getItemIds();
+        if (itemIdsList.length === 0)
+            return null;
+        const currentIndex = currentId !== null ? itemIdsList.indexOf(currentId) : -1;
+        if (currentIndex < itemIdsList.length - 1) {
+            return itemIdsList[currentIndex + 1];
+        }
+        // At end - loop or stay
+        return loop ? itemIdsList[0] : null;
+    }
+    function getPreviousItemId(currentId) {
+        const itemIdsList = getItemIds();
+        if (itemIdsList.length === 0)
+            return null;
+        const currentIndex = currentId !== null ? itemIdsList.indexOf(currentId) : itemIdsList.length;
+        if (currentIndex > 0) {
+            return itemIdsList[currentIndex - 1];
+        }
+        // At start - loop or stay
+        return loop ? itemIdsList[itemIdsList.length - 1] : null;
+    }
+    const keyboardNav = createKeyboardNavigation({
+        orientation: 'vertical',
+        loop: loop,
+        itemSelector: '[data-navigation-item]:not([data-disabled])',
+        onSelect: (id) => {
+            select(id);
+        },
+        onFocusChange: (id) => {
+            setFocusedId(id);
+        },
+        onSelectAll: selectionMode === 'multiple' ? selectAll : undefined,
+        homeEndKeys: true
+    });
+    const ctx = {
+        selectionMode,
+        selectionBehavior,
+        disabledIds,
+        getSelectedKeys,
+        getFocusedId,
+        isSelected,
+        isDisabled,
+        isFocused,
+        keyboardNav,
+        items,
+        registerItem,
+        unregisterItem,
+        getItemIds,
+        getItemCount,
+        subscribeToItemCount,
+        select,
+        selectAll,
+        setSelection,
+        setFocusedId,
+        subscribeToItem,
+        subscribeToFocus,
+        getNextItemId,
+        getPreviousItemId
+    };
+    setContext(KEY, ctx);
+    return ctx;
+}
+export function useListBoxContext() {
+    const ctx = getContext(KEY);
+    if (!ctx) {
+        throw new Error('useListBoxContext must be used within a ListBox component');
+    }
+    return ctx;
+}

package/dist/listbox/root/listbox-numeric-id-test.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import ListBox from '../index';
+
+	let selected = $state<string | number | undefined>();
+
+	function handleChange(value: Set<string | number>) {
+		selected = Array.from(value)[0];
+	}
+</script>
+
+<ListBox.Root aria-label="Codes list" onChange={handleChange}>
+	<ListBox.Item id="01">Code 01</ListBox.Item>
+	<ListBox.Item id="02">Code 02</ListBox.Item>
+	<ListBox.Item id={3}>Code 3</ListBox.Item>
+</ListBox.Root>
+
+<div data-testid="selected">{selected === undefined ? '' : String(selected)}</div>
+<div data-testid="selected-type">{selected === undefined ? '' : typeof selected}</div>

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

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

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ListBox from '../index';
+
+	type Props = {
+		selectionMode?: 'single' | 'multiple';
+		selectionBehavior?: 'toggle' | 'replace';
+		disabledIds?: Iterable<string | number>;
+	};
+
+	let { selectionMode = 'single', selectionBehavior = 'toggle', disabledIds }: Props = $props();
+
+	const fruits = [
+		{ id: 'apple', name: 'Apple' },
+		{ id: 'banana', name: 'Banana' },
+		{ id: 'cherry', name: 'Cherry' },
+		{ id: 'grape', name: 'Grape' },
+		{ id: 'orange', name: 'Orange' }
+	];
+</script>
+
+<ListBox.Root {selectionMode} {selectionBehavior} {disabledIds} aria-label="Fruits list">
+	{#each fruits as fruit (fruit.id)}
+		<ListBox.Item id={fruit.id} textValue={fruit.name}>
+			{fruit.name}
+		</ListBox.Item>
+	{/each}
+</ListBox.Root>

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

@@ -0,0 +1,8 @@
+type Props = {
+    selectionMode?: 'single' | 'multiple';
+    selectionBehavior?: 'toggle' | 'replace';
+    disabledIds?: Iterable<string | number>;
+};
+declare const ListboxTest: import("svelte").Component<Props, {}, "">;
+type ListboxTest = ReturnType<typeof ListboxTest>;
+export default ListboxTest;

package/dist/listbox/root/listbox.svelte

@@ -0,0 +1,146 @@
+<script lang="ts" generics="T extends object = object">
+	import type { Snippet } from 'svelte';
+	import { createListBoxContext, type ListBoxContext } from './context';
+
+	/**
+	 * Props for the ListBox component.
+	 * @template T - The type of items when using dynamic rendering with the `items` prop.
+	 */
+	type ListBoxProps = {
+		/** How selection behaves: 'toggle' allows deselection, 'replace' always selects. */
+		selectionBehavior?: 'toggle' | 'replace';
+		/** Content shown when the list is empty. Can be a string or a Snippet. */
+		emptyPlaceholder?: string | Snippet;
+		/** Iterable of items for dynamic rendering. Used with a snippet that receives each item. */
+		items?: Iterable<T>;
+		/** IDs of items that should be disabled and non-selectable. */
+		disabledIds?: Iterable<string | number>;
+		/** Selection mode: 'single' allows one selection, 'multiple' allows many. */
+		selectionMode?: 'single' | 'multiple';
+		/** Controlled value. When provided, the component is in controlled mode. */
+		value?: Iterable<string | number>;
+		/** Initial selection for uncontrolled mode. */
+		defaultValue?: Iterable<string | number>;
+		/** Content of the listbox. Can be static children or a snippet receiving items. */
+		children?: Snippet | Snippet<[T]>;
+		/** CSS class to apply to the listbox container. */
+		class?: string;
+		/** HTML id attribute for the listbox element. */
+		id?: string;
+		/** Accessible label for the listbox. Announced by screen readers. */
+		'aria-label'?: string;
+		/** Callback fired when the selection changes. */
+		onChange?: (value: Set<string | number>) => void;
+	};
+
+	let {
+		selectionBehavior = 'toggle',
+		emptyPlaceholder = 'No items selected',
+		items,
+		disabledIds,
+		selectionMode = 'single',
+		value = $bindable(),
+		defaultValue,
+		children,
+		class: className = '',
+		id,
+		'aria-label': ariaLabel,
+		onChange,
+		context = $bindable(),
+		element = $bindable()
+	}: ListBoxProps & { context?: ListBoxContext; element?: HTMLElement } = $props();
+
+	let listboxElement: HTMLElement;
+
+	// Expose element via bindable prop
+	$effect(() => {
+		element = listboxElement;
+	});
+
+	function parseSelection(val: Iterable<string | number> | undefined): Set<string | number> {
+		if (val === undefined) return new Set();
+		return new Set(val);
+	}
+
+	const isControlled = $derived(value !== undefined);
+
+	const ctx = createListBoxContext({
+		get selectionMode() {
+			return selectionMode;
+		},
+		get selectionBehavior() {
+			return selectionBehavior;
+		},
+		get disabledIds() {
+			return disabledIds;
+		},
+		// Use function to capture initial value only (not reactive)
+		initialSelection: (() => parseSelection(defaultValue))(),
+		onSelectionChange: (newSelection) => {
+			onChange?.(newSelection);
+		}
+	});
+
+	// Expose context via bindable prop
+	context = ctx;
+
+	const { action: keyboardAction } = ctx.keyboardNav;
+
+	$effect(() => {
+		if (isControlled && value !== undefined) {
+			const newSelection = parseSelection(value);
+			ctx.setSelection(newSelection);
+		}
+	});
+
+	$effect(() => {
+		ctx.disabledIds.clear();
+		if (disabledIds) {
+			for (const id of disabledIds) {
+				ctx.disabledIds.add(id);
+			}
+		}
+	});
+
+	let itemCount = $state(0);
+
+	// Subscribe to item count changes for reactive empty state
+	$effect(() => {
+		const unsubscribe = ctx.subscribeToItemCount((count) => {
+			itemCount = count;
+		});
+		return unsubscribe;
+	});
+
+	const itemsArray = $derived(items ? Array.from(items) : []);
+	const hasItems = $derived(itemsArray.length > 0 || itemCount > 0);
+</script>
+
+<div
+	bind:this={listboxElement}
+	role="listbox"
+	{id}
+	aria-multiselectable={selectionMode === 'multiple'}
+	aria-label={ariaLabel}
+	class={className}
+	tabindex="0"
+	use:keyboardAction
+>
+	{#if items && children}
+		{#each itemsArray as item (item)}
+			{@render (children as Snippet<[T]>)(item)}
+		{/each}
+	{:else if children}
+		{@render (children as Snippet)()}
+	{/if}
+
+	{#if !hasItems && itemCount === 0}
+		{#if typeof emptyPlaceholder === 'string'}
+			<div role="option" aria-selected="false" aria-disabled="true" data-empty-placeholder>
+				{emptyPlaceholder}
+			</div>
+		{:else if emptyPlaceholder}
+			{@render emptyPlaceholder()}
+		{/if}
+	{/if}
+</div>

package/dist/listbox/root/listbox.svelte.d.ts

@@ -0,0 +1,54 @@
+import type { Snippet } from 'svelte';
+import { type ListBoxContext } from './context';
+declare function $$render<T extends object = object>(): {
+    props: {
+        /** How selection behaves: 'toggle' allows deselection, 'replace' always selects. */
+        selectionBehavior?: "toggle" | "replace";
+        /** Content shown when the list is empty. Can be a string or a Snippet. */
+        emptyPlaceholder?: string | Snippet;
+        /** Iterable of items for dynamic rendering. Used with a snippet that receives each item. */
+        items?: Iterable<T>;
+        /** IDs of items that should be disabled and non-selectable. */
+        disabledIds?: Iterable<string | number>;
+        /** Selection mode: 'single' allows one selection, 'multiple' allows many. */
+        selectionMode?: "single" | "multiple";
+        /** Controlled value. When provided, the component is in controlled mode. */
+        value?: Iterable<string | number>;
+        /** Initial selection for uncontrolled mode. */
+        defaultValue?: Iterable<string | number>;
+        /** Content of the listbox. Can be static children or a snippet receiving items. */
+        children?: Snippet | Snippet<[T]>;
+        /** CSS class to apply to the listbox container. */
+        class?: string;
+        /** HTML id attribute for the listbox element. */
+        id?: string;
+        /** Accessible label for the listbox. Announced by screen readers. */
+        'aria-label'?: string;
+        /** Callback fired when the selection changes. */
+        onChange?: (value: Set<string | number>) => void;
+    } & {
+        context?: ListBoxContext;
+        element?: HTMLElement;
+    };
+    exports: {};
+    bindings: "value" | "context" | "element";
+    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(): "value" | "context" | "element";
+    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 Listbox: $$IsomorphicComponent;
+type Listbox<T extends object = object> = InstanceType<typeof Listbox<T>>;
+export default Listbox;

package/dist/popover/content/popover-content-test.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Popover } from '../index';
+
+	type Props = {
+		open?: boolean;
+		defaultOpen?: boolean;
+		isNonModal?: boolean;
+		shouldCloseOnInteractOutside?: boolean;
+		shouldCloseOnEscape?: boolean;
+		shouldCloseOnBlur?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	};
+
+	let {
+		open,
+		defaultOpen = false,
+		isNonModal = false,
+		shouldCloseOnInteractOutside = true,
+		shouldCloseOnEscape = true,
+		shouldCloseOnBlur,
+		onOpenChange
+	}: Props = $props();
+</script>
+
+<Popover.Root {open} {defaultOpen} {onOpenChange}>
+	<Popover.Trigger>
+		<button type="button">Open Popover</button>
+	</Popover.Trigger>
+
+	<Popover.Content
+		class="popover-content"
+		{isNonModal}
+		{shouldCloseOnInteractOutside}
+		{shouldCloseOnEscape}
+		{shouldCloseOnBlur}
+	>
+		<div class="popover-body">
+			<h3>Popover Title</h3>
+			<p>Popover content goes here.</p>
+			<button type="button" class="close-btn">Close</button>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/popover/content/popover-content-test.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    isNonModal?: boolean;
+    shouldCloseOnInteractOutside?: boolean;
+    shouldCloseOnEscape?: boolean;
+    shouldCloseOnBlur?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const PopoverContentTest: import("svelte").Component<Props, {}, "">;
+type PopoverContentTest = ReturnType<typeof PopoverContentTest>;
+export default PopoverContentTest;