@dryui/ui 0.0.1

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

@@ -0,0 +1,278 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { generateFormId } from '@dryui/primitives';
+	import { setMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: string[];
+		query?: string;
+		open?: boolean;
+		disabled?: boolean;
+		name?: string;
+		maxSelections?: number;
+		onvaluechange?: (value: string[]) => void;
+		onquerychange?: (query: string) => void;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable([]),
+		query = $bindable(''),
+		open = $bindable(false),
+		disabled = false,
+		name,
+		maxSelections = 0,
+		onvaluechange,
+		onquerychange,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const inputId = generateFormId('multi-select-combobox-input');
+	const contentId = generateFormId('multi-select-combobox-content');
+
+	let rootEl = $state<HTMLDivElement | null>(null);
+	let inputEl = $state<HTMLInputElement | null>(null);
+	let activeItemId = $state('');
+	let itemIds = $state<string[]>([]);
+
+	function setQueryValue(nextQuery: string, notify = true) {
+		query = nextQuery;
+		if (notify) {
+			onquerychange?.(nextQuery);
+		}
+	}
+
+	function setSelectedValues(nextValue: string[]) {
+		value = nextValue;
+		onvaluechange?.(nextValue);
+	}
+
+	function focusInput() {
+		inputEl?.focus();
+	}
+
+	function canSelectValue(itemValue: string) {
+		return value.includes(itemValue) || maxSelections === 0 || value.length < maxSelections;
+	}
+
+	function getEnabledItems() {
+		const contentEl = document.getElementById(contentId);
+		if (!(contentEl instanceof HTMLElement)) {
+			return [];
+		}
+
+		return Array.from(
+			contentEl.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])')
+		);
+	}
+
+	function show() {
+		if (!disabled) {
+			open = true;
+		}
+	}
+
+	function close() {
+		open = false;
+		activeItemId = '';
+	}
+
+	function selectValue(itemValue: string) {
+		if (disabled || value.includes(itemValue) || !canSelectValue(itemValue)) {
+			return false;
+		}
+
+		setSelectedValues([...value, itemValue]);
+		setQueryValue('');
+		activeItemId = '';
+		focusInput();
+		return true;
+	}
+
+	function removeValue(itemValue: string) {
+		if (!value.includes(itemValue)) {
+			return;
+		}
+
+		setSelectedValues(value.filter((entry) => entry !== itemValue));
+	}
+
+	function removeLastValue() {
+		const lastValue = value[value.length - 1];
+		if (lastValue) {
+			removeValue(lastValue);
+		}
+	}
+
+	function attachRoot(node: HTMLDivElement) {
+		rootEl = node;
+
+		function handlePointerDown(event: PointerEvent) {
+			if (event.button !== 0) {
+				return;
+			}
+
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) {
+				return;
+			}
+
+			if (target.closest('button, a, input, textarea, select, label')) {
+				return;
+			}
+
+			event.preventDefault();
+			focusInput();
+			show();
+		}
+
+		node.addEventListener('pointerdown', handlePointerDown);
+		return () => {
+			node.removeEventListener('pointerdown', handlePointerDown);
+			if (rootEl === node) {
+				rootEl = null;
+			}
+		};
+	}
+
+	setMultiSelectComboboxCtx({
+		get open() {
+			return open;
+		},
+		get query() {
+			return query;
+		},
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get maxSelections() {
+			return maxSelections;
+		},
+		get activeItemId() {
+			return activeItemId;
+		},
+		get itemCount() {
+			return itemIds.length;
+		},
+		get inputId() {
+			return inputId;
+		},
+		get contentId() {
+			return contentId;
+		},
+		get anchorEl() {
+			return rootEl ?? null;
+		},
+		get inputEl() {
+			return inputEl;
+		},
+		set inputEl(element: HTMLInputElement | null) {
+			inputEl = element;
+		},
+		show,
+		close,
+		setQuery(value, notify = true) {
+			setQueryValue(value, notify);
+		},
+		setActiveItem(id: string) {
+			activeItemId = id;
+		},
+		registerItem(id: string) {
+			untrack(() => {
+				if (!itemIds.includes(id)) {
+					itemIds = [...itemIds, id];
+				}
+			});
+		},
+		unregisterItem(id: string) {
+			untrack(() => {
+				itemIds = itemIds.filter((itemId) => itemId !== id);
+				if (activeItemId === id) {
+					activeItemId = '';
+				}
+			});
+		},
+		getEnabledItems,
+		isSelected(itemValue: string) {
+			return value.includes(itemValue);
+		},
+		canSelect(itemValue: string) {
+			return canSelectValue(itemValue);
+		},
+		selectValue,
+		removeValue,
+		removeLastValue,
+		focusInput
+	});
+</script>
+
+<div data-multi-select-wrapper>
+	<div
+		{@attach attachRoot}
+		role="group"
+		data-multi-select-root
+		data-state={open ? 'open' : 'closed'}
+		data-disabled={disabled || undefined}
+		class={className}
+		{...rest}
+	>
+		{@render children()}
+
+		{#if name}
+			{#each value as selectedValue (selectedValue)}
+				<input type="hidden" {name} value={selectedValue} disabled={disabled || undefined} />
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	[data-multi-select-wrapper] {
+		container-type: inline-size;
+		display: grid;
+	}
+
+	[data-multi-select-root] {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
+		gap: var(--dry-space-1_5);
+		padding: var(--dry-space-2);
+		border: 1px solid var(--dry-color-stroke-strong);
+		border-radius: var(--dry-radius-md);
+		background: var(--dry-color-bg-raised);
+		min-height: 44px;
+		align-items: center;
+		box-sizing: border-box;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		cursor: text;
+	}
+
+	[data-multi-select-root]:focus-within {
+		border-color: var(--dry-color-stroke-focus);
+		box-shadow: 0 0 0 2px var(--dry-color-stroke-focus);
+		outline: none;
+	}
+
+	[data-multi-select-root][data-disabled] {
+		background: var(--dry-color-bg-sunken);
+		border-color: var(--dry-color-stroke-disabled);
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	@container (max-width: 200px) {
+		[data-multi-select-root] {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+		value: string;
+		children?: Snippet | undefined;
+	}
+
+	let { class: className, value, children, ...rest }: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+</script>
+
+{#if ctx.isSelected(value)}
+	<span
+		role="listitem"
+		data-multi-select-selection-item
+		data-value={value}
+		class={className}
+		{...rest}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{value}
+		{/if}
+	</span>
+{/if}
+
+<style>
+	[data-multi-select-selection-item] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-1);
+		padding: 4px var(--dry-space-2);
+		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);
+		border-radius: var(--dry-radius-full);
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		font-family: var(--dry-font-sans);
+		font-weight: 500;
+		line-height: 1.5;
+		white-space: nowrap;
+		user-select: none;
+	}
+
+	@container (max-width: 200px) {
+		[data-multi-select-selection-item] {
+			grid-template-columns: 1fr auto;
+		}
+	}
+</style>

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

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

package/dist/multi-select-combobox/multi-select-combobox-selection-list.svelte

@@ -0,0 +1,29 @@
+<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>
+
+<div
+	role="list"
+	data-multi-select-selection-list
+	data-empty={ctx.value.length === 0 || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-multi-select-selection-list] {
+		display: contents;
+	}
+</style>

package/dist/multi-select-combobox/multi-select-combobox-selection-list.svelte.d.ts

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

package/dist/multi-select-combobox/multi-select-combobox-selection-remove.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		value: string;
+		label?: string | undefined;
+	}
+
+	let { class: className, value, label, onclick, ...rest }: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (ctx.disabled) {
+			return;
+		}
+
+		ctx.removeValue(value);
+		ctx.focusInput();
+
+		if (onclick) {
+			(onclick as (event: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(event);
+		}
+	}
+</script>
+
+<button
+	type="button"
+	aria-label={`Remove selection: ${label ?? value}`}
+	disabled={ctx.disabled}
+	data-multi-select-selection-remove
+	data-disabled={ctx.disabled || undefined}
+	class={className}
+	onclick={handleClick}
+	{...rest}
+></button>
+
+<style>
+	[data-multi-select-selection-remove] {
+		display: inline-grid;
+		place-items: center;
+		aspect-ratio: 1;
+		height: 16px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		border-radius: var(--dry-radius-full);
+		transition:
+			color var(--dry-duration-fast) var(--dry-ease-default),
+			background var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-multi-select-selection-remove]::after {
+		content: '\00d7';
+		font-size: 14px;
+		line-height: 1;
+		font-weight: 400;
+	}
+
+	[data-multi-select-selection-remove]:hover:not(:disabled) {
+		background: var(--dry-color-fill-hover);
+	}
+
+	[data-multi-select-selection-remove]:focus-visible {
+		outline: 2px solid var(--dry-color-stroke-focus);
+		outline-offset: -1px;
+	}
+
+	[data-multi-select-selection-remove]:disabled {
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+</style>

package/dist/multi-select-combobox/multi-select-combobox-selection-remove.svelte.d.ts

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

package/dist/navigation-menu/context.svelte.d.ts

@@ -0,0 +1,15 @@
+import { generateFormId } from '@dryui/primitives';
+export interface NavigationMenuContext {
+    readonly activeItem: string | null;
+    openItem: (id: string) => void;
+    closeItem: () => void;
+}
+export declare const setNavigationMenuCtx: (ctx: NavigationMenuContext) => NavigationMenuContext, getNavigationMenuCtx: () => NavigationMenuContext;
+export interface NavigationMenuItemContext {
+    readonly itemId: string;
+    readonly triggerId: string;
+    readonly contentId: string;
+    readonly open: boolean;
+}
+export declare const setNavigationMenuItemCtx: (ctx: NavigationMenuItemContext) => NavigationMenuItemContext, getNavigationMenuItemCtx: () => NavigationMenuItemContext;
+export { generateFormId };

package/dist/navigation-menu/context.svelte.js

@@ -0,0 +1,4 @@
+import { createContext, generateFormId } from '@dryui/primitives';
+export const [setNavigationMenuCtx, getNavigationMenuCtx] = createContext('navigation-menu');
+export const [setNavigationMenuItemCtx, getNavigationMenuItemCtx] = createContext('navigation-menu-item');
+export { generateFormId };

package/dist/navigation-menu/index.d.ts

@@ -0,0 +1,22 @@
+export type {
+	NavigationMenuRootProps,
+	NavigationMenuListProps,
+	NavigationMenuItemProps,
+	NavigationMenuTriggerProps,
+	NavigationMenuContentProps,
+	NavigationMenuLinkProps
+} from '@dryui/primitives';
+import NavigationMenuRoot from './navigation-menu-root.svelte';
+import NavigationMenuList from './navigation-menu-list.svelte';
+import NavigationMenuItem from './navigation-menu-item.svelte';
+import NavigationMenuTrigger from './navigation-menu-trigger.svelte';
+import NavigationMenuContent from './navigation-menu-content.svelte';
+import NavigationMenuLink from './navigation-menu-link.svelte';
+export declare const NavigationMenu: {
+	Root: typeof NavigationMenuRoot;
+	List: typeof NavigationMenuList;
+	Item: typeof NavigationMenuItem;
+	Trigger: typeof NavigationMenuTrigger;
+	Content: typeof NavigationMenuContent;
+	Link: typeof NavigationMenuLink;
+};

package/dist/navigation-menu/index.js

@@ -0,0 +1,14 @@
+import NavigationMenuRoot from './navigation-menu-root.svelte';
+import NavigationMenuList from './navigation-menu-list.svelte';
+import NavigationMenuItem from './navigation-menu-item.svelte';
+import NavigationMenuTrigger from './navigation-menu-trigger.svelte';
+import NavigationMenuContent from './navigation-menu-content.svelte';
+import NavigationMenuLink from './navigation-menu-link.svelte';
+export const NavigationMenu = {
+    Root: NavigationMenuRoot,
+    List: NavigationMenuList,
+    Item: NavigationMenuItem,
+    Trigger: NavigationMenuTrigger,
+    Content: NavigationMenuContent,
+    Link: NavigationMenuLink
+};

package/dist/navigation-menu/navigation-menu-content.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getNavigationMenuCtx, getNavigationMenuItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getNavigationMenuCtx();
+	const itemCtx = getNavigationMenuItemCtx();
+
+	function handlePointerEnter() {
+		ctx.openItem(itemCtx.itemId);
+	}
+
+	function handlePointerLeave() {
+		ctx.closeItem();
+	}
+</script>
+
+{#if itemCtx.open}
+	<div
+		id={itemCtx.contentId}
+		role="region"
+		aria-labelledby={itemCtx.triggerId}
+		data-state={itemCtx.open ? 'open' : 'closed'}
+		data-nav-menu-content
+		class={className}
+		onpointerenter={handlePointerEnter}
+		onpointerleave={handlePointerLeave}
+		{...rest}
+	>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	[data-nav-menu-content] {
+		position: absolute;
+		inset-block-start: calc(100% + var(--dry-space-2));
+		inset-inline-start: 0;
+		z-index: 20;
+		display: grid;
+		grid-template-columns: minmax(16rem, max-content);
+		gap: var(--dry-space-1);
+		padding: var(--dry-nav-menu-content-padding);
+		background: var(--dry-nav-menu-content-bg);
+		border: 1px solid var(--dry-nav-menu-content-border);
+		border-radius: var(--dry-nav-menu-content-radius);
+		box-shadow: var(--dry-nav-menu-content-shadow);
+	}
+</style>

package/dist/navigation-menu/navigation-menu-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+declare const NavigationMenuContent: import('svelte').Component<Props, {}, ''>;
+type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
+export default NavigationMenuContent;

package/dist/navigation-menu/navigation-menu-item.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		setNavigationMenuItemCtx,
+		getNavigationMenuCtx,
+		generateFormId
+	} from './context.svelte.js';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const ctx = getNavigationMenuCtx();
+	const itemId = generateFormId('nav-item');
+	const triggerId = generateFormId('nav-trigger');
+	const contentId = generateFormId('nav-content');
+
+	setNavigationMenuItemCtx({
+		itemId,
+		triggerId,
+		contentId,
+		get open() {
+			return ctx.activeItem === itemId;
+		}
+	});
+</script>
+
+<li>
+	{@render children()}
+</li>

package/dist/navigation-menu/navigation-menu-item.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+	children: Snippet;
+}
+declare const NavigationMenuItem: import('svelte').Component<Props, {}, ''>;
+type NavigationMenuItem = ReturnType<typeof NavigationMenuItem>;
+export default NavigationMenuItem;

package/dist/navigation-menu/navigation-menu-link.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAnchorAttributes {
+		active?: boolean;
+		children: Snippet;
+	}
+
+	let { active = false, class: className, children, ...rest }: Props = $props();
+</script>
+
+<a data-active={active || undefined} data-nav-menu-link class={className} {...rest}>
+	{@render children()}
+</a>
+
+<style>
+	[data-nav-menu-link] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		min-height: var(--dry-space-12);
+		gap: var(--dry-space-2);
+		padding: var(--dry-nav-menu-link-padding-y) var(--dry-nav-menu-link-padding-x);
+		border-radius: var(--dry-radius-md);
+		color: var(--dry-color-text-strong);
+		text-decoration: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-nav-menu-link]:hover {
+		background: var(--dry-color-fill);
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-nav-menu-link][data-active] {
+		background: var(--dry-color-fill-brand-weak);
+		color: var(--dry-color-text-brand);
+		box-shadow: inset 2px 0 0 var(--dry-color-stroke-selected);
+		font-weight: 600;
+	}
+
+	[data-nav-menu-link]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 2px;
+	}
+</style>