@dryui/ui 3.0.0 → 4.0.0

package/src/transfer/transfer-actions-button.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getTransferCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		children?: Snippet<
+			[
+				{
+					moveToTarget: () => void;
+					moveToSource: () => void;
+					moveAllToTarget: () => void;
+					moveAllToSource: () => void;
+					canMoveToTarget: boolean;
+					canMoveToSource: boolean;
+				}
+			]
+		>;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getTransferCtx();
+
+	let canMoveToTarget = $derived(ctx.selectedSourceCount > 0);
+	let canMoveToSource = $derived(ctx.selectedTargetCount > 0);
+</script>
+
+<div data-part="actions" data-transfer-actions class={className} {...rest}>
+	{#if children}
+		{@render children({
+			moveToTarget: () => ctx.moveToTarget(),
+			moveToSource: () => ctx.moveToSource(),
+			moveAllToTarget: () => ctx.moveAllToTarget(),
+			moveAllToSource: () => ctx.moveAllToSource(),
+			canMoveToTarget,
+			canMoveToSource
+		})}
+	{:else}
+		<Button
+			variant="outline"
+			size="icon-sm"
+			type="button"
+			disabled={!canMoveToTarget}
+			onclick={() => ctx.moveAllToTarget()}
+			aria-label="Move all to target"
+		>
+			&#8649;
+		</Button>
+		<Button
+			variant="outline"
+			size="icon-sm"
+			type="button"
+			disabled={!canMoveToTarget}
+			onclick={() => ctx.moveToTarget()}
+			aria-label="Move selected to target"
+		>
+			&#8594;
+		</Button>
+		<Button
+			variant="outline"
+			size="icon-sm"
+			type="button"
+			disabled={!canMoveToSource}
+			onclick={() => ctx.moveToSource()}
+			aria-label="Move selected to source"
+		>
+			&#8592;
+		</Button>
+		<Button
+			variant="outline"
+			size="icon-sm"
+			type="button"
+			disabled={!canMoveToSource}
+			onclick={() => ctx.moveAllToSource()}
+			aria-label="Move all to source"
+		>
+			&#8647;
+		</Button>
+	{/if}
+</div>
+
+<style>
+	[data-part='actions'] {
+		display: grid;
+		place-items: center;
+		gap: var(--dry-transfer-actions-gap, var(--dry-space-2));
+		padding: 0 var(--dry-space-1);
+	}
+</style>

package/src/transfer/transfer-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getTransferCtx } from './context.svelte.js';
+	import { Checkbox } from '../checkbox/index.js';
+
+	interface Props extends HTMLAttributes<HTMLLabelElement> {
+		key: string;
+		type: 'source' | 'target';
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let { key, type, disabled = false, children, ...rest }: Props = $props();
+
+	const ctx = getTransferCtx();
+
+	let selectedSet = $derived(type === 'source' ? ctx.selectedSource : ctx.selectedTarget);
+	let isSelected = $derived(selectedSet.has(key));
+
+	function toggle() {
+		if (disabled) return;
+		type === 'source' ? ctx.toggleSourceSelection(key) : ctx.toggleTargetSelection(key);
+	}
+</script>
+
+<label
+	data-transfer-item
+	data-disabled={disabled ? '' : undefined}
+	data-selected={isSelected ? '' : undefined}
+	{...rest}
+>
+	<Checkbox checked={isSelected} {disabled} onchange={toggle} size="sm" />
+	{@render children()}
+</label>

package/src/transfer/transfer-list-input.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getTransferCtx, type TransferItem } from './context.svelte.js';
+	import { Checkbox } from '../checkbox/index.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		type: 'source' | 'target';
+		title?: string;
+		filterable?: boolean;
+		content?: Snippet<[{ items: TransferItem[] }]>;
+	}
+
+	let { class: className, type, title, filterable = false, content, ...rest }: Props = $props();
+
+	const ctx = getTransferCtx();
+
+	let items = $derived(type === 'source' ? ctx.sourceItems : ctx.targetItems);
+	let selectedSet = $derived(type === 'source' ? ctx.selectedSource : ctx.selectedTarget);
+	let count = $derived(type === 'source' ? ctx.sourceCount : ctx.targetCount);
+	let selectedCount = $derived(
+		type === 'source' ? ctx.selectedSourceCount : ctx.selectedTargetCount
+	);
+	let allSelected = $derived(
+		type === 'source' ? ctx.isSourceAllSelected() : ctx.isTargetAllSelected()
+	);
+
+	function toggleAll() {
+		if (allSelected) {
+			type === 'source' ? ctx.deselectAllSource() : ctx.deselectAllTarget();
+		} else {
+			type === 'source' ? ctx.selectAllSource() : ctx.selectAllTarget();
+		}
+	}
+
+	function toggleItem(key: string) {
+		type === 'source' ? ctx.toggleSourceSelection(key) : ctx.toggleTargetSelection(key);
+	}
+
+	let filterQuery = $state('');
+
+	function filterItems(allItems: TransferItem[]): TransferItem[] {
+		if (!filterable || !filterQuery) return allItems;
+		const q = filterQuery.toLowerCase();
+		return allItems.filter((i) => i.label.toLowerCase().includes(q));
+	}
+</script>
+
+<div data-part="list" class={className} {...rest}>
+	{#if filterable}
+		<input
+			type="text"
+			data-part="filter"
+			placeholder="Search..."
+			aria-label="Filter {type} items"
+			bind:value={filterQuery}
+		/>
+	{/if}
+
+	<div
+		role="group"
+		aria-label={title ?? (type === 'source' ? 'Available items' : 'Selected items')}
+		data-transfer-list
+		data-type={type}
+	>
+		{#if title}
+			<div data-transfer-list-header>
+				<label data-transfer-select-all>
+					<Checkbox
+						checked={allSelected}
+						indeterminate={selectedCount > 0 && !allSelected}
+						onchange={toggleAll}
+						aria-label="Select all {type} items"
+						size="sm"
+					/>
+					<span>{title}</span>
+				</label>
+				<span data-transfer-count>
+					{selectedCount}/{count}
+				</span>
+			</div>
+		{/if}
+
+		<div data-transfer-list-content>
+			{#if content}
+				{@render content({ items: filterItems(items) })}
+			{:else}
+				{#each filterItems(items) as item (item.key)}
+					<label
+						data-transfer-item
+						data-disabled={item.disabled ? '' : undefined}
+						data-selected={selectedSet.has(item.key) ? '' : undefined}
+					>
+						<Checkbox
+							checked={selectedSet.has(item.key)}
+							disabled={item.disabled}
+							onchange={() => toggleItem(item.key)}
+							size="sm"
+						/>
+						{item.label}
+					</label>
+				{/each}
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	[data-part='list'] {
+		border: 1px solid var(--dry-transfer-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-transfer-radius, var(--dry-radius-lg));
+		background: var(--dry-transfer-bg, var(--dry-color-bg-base));
+		overflow: hidden;
+		display: grid;
+	}
+
+	[data-part='list'] [data-transfer-list-header] {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+		padding: var(--dry-space-2_5) var(--dry-transfer-padding, var(--dry-space-3));
+		background: var(--dry-transfer-header-bg, var(--dry-color-bg-raised));
+		border-bottom: 1px solid var(--dry-transfer-border, var(--dry-color-stroke-weak));
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		font-weight: 500;
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-part='list'] [data-transfer-select-all] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		cursor: pointer;
+	}
+
+	[data-part='list'] [data-transfer-count] {
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		color: var(--dry-color-text-weak);
+		font-variant-numeric: tabular-nums;
+	}
+
+	[data-part='list'] [data-transfer-list-content] {
+		overflow-y: auto;
+		max-height: var(--dry-transfer-list-height, 280px);
+	}
+
+	[data-part='list'] [data-transfer-item] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-2) var(--dry-transfer-padding, var(--dry-space-3));
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		color: var(--dry-color-text-strong);
+		cursor: pointer;
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+		border: none;
+	}
+
+	[data-part='list'] [data-transfer-item]:hover:not([data-disabled]) {
+		background: var(--dry-transfer-item-hover, var(--dry-color-fill));
+	}
+
+	[data-part='list'] [data-transfer-item][data-selected] {
+		background: var(--dry-transfer-item-selected, 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-part='list'] [data-transfer-item][data-disabled] {
+		background: var(--dry-color-bg-sunken);
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+
+	[data-part='filter'] {
+		display: grid;
+		padding: var(--dry-space-2) var(--dry-transfer-padding, var(--dry-space-3));
+		border: none;
+		border-bottom: 1px solid var(--dry-transfer-border, var(--dry-color-stroke-weak));
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		font-family: var(--dry-font-sans);
+		color: var(--dry-color-text-strong);
+		background: var(--dry-transfer-bg, var(--dry-color-bg-base));
+	}
+
+	[data-part='filter']:focus {
+		outline: none;
+		background: var(--dry-color-fill-brand-weak);
+		border-bottom-color: var(--dry-color-stroke-focus);
+	}
+
+	[data-part='filter']:focus-visible {
+		outline: 2px solid var(--dry-color-stroke-focus);
+		outline-offset: -2px;
+	}
+
+	[data-part='filter']::placeholder {
+		color: var(--dry-color-text-weak);
+	}
+</style>

package/src/transfer/transfer-root.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setTransferCtx, type TransferItem } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		sourceItems: TransferItem[];
+		targetItems?: TransferItem[];
+		onChange?: (source: TransferItem[], target: TransferItem[]) => void;
+		children: Snippet;
+	}
+
+	let {
+		sourceItems = $bindable([]),
+		targetItems = $bindable([]),
+		onChange,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let selectedSource: Set<string> = $state(new Set());
+	let selectedTarget: Set<string> = $state(new Set());
+
+	function emitChange(source: TransferItem[], target: TransferItem[]) {
+		sourceItems = source;
+		targetItems = target;
+		onChange?.(source, target);
+	}
+
+	setTransferCtx({
+		get sourceItems() {
+			return sourceItems;
+		},
+		get targetItems() {
+			return targetItems;
+		},
+		get selectedSource() {
+			return selectedSource;
+		},
+		get selectedTarget() {
+			return selectedTarget;
+		},
+		get sourceCount() {
+			return sourceItems.length;
+		},
+		get targetCount() {
+			return targetItems.length;
+		},
+		get selectedSourceCount() {
+			return selectedSource.size;
+		},
+		get selectedTargetCount() {
+			return selectedTarget.size;
+		},
+		toggleSourceSelection(key: string) {
+			const item = sourceItems.find((i) => i.key === key);
+			if (item?.disabled) return;
+			const next = new Set(selectedSource);
+			if (next.has(key)) {
+				next.delete(key);
+			} else {
+				next.add(key);
+			}
+			selectedSource = next;
+		},
+		toggleTargetSelection(key: string) {
+			const item = targetItems.find((i) => i.key === key);
+			if (item?.disabled) return;
+			const next = new Set(selectedTarget);
+			if (next.has(key)) {
+				next.delete(key);
+			} else {
+				next.add(key);
+			}
+			selectedTarget = next;
+		},
+		selectAllSource() {
+			selectedSource = new Set(sourceItems.filter((i) => !i.disabled).map((i) => i.key));
+		},
+		selectAllTarget() {
+			selectedTarget = new Set(targetItems.filter((i) => !i.disabled).map((i) => i.key));
+		},
+		deselectAllSource() {
+			selectedSource = new Set();
+		},
+		deselectAllTarget() {
+			selectedTarget = new Set();
+		},
+		moveToTarget() {
+			const toMove = sourceItems.filter((i) => selectedSource.has(i.key));
+			const remaining = sourceItems.filter((i) => !selectedSource.has(i.key));
+			selectedSource = new Set();
+			emitChange(remaining, [...targetItems, ...toMove]);
+		},
+		moveToSource() {
+			const toMove = targetItems.filter((i) => selectedTarget.has(i.key));
+			const remaining = targetItems.filter((i) => !selectedTarget.has(i.key));
+			selectedTarget = new Set();
+			emitChange([...sourceItems, ...toMove], remaining);
+		},
+		moveAllToTarget() {
+			const movable = sourceItems.filter((i) => !i.disabled);
+			const remaining = sourceItems.filter((i) => i.disabled);
+			selectedSource = new Set();
+			emitChange(remaining, [...targetItems, ...movable]);
+		},
+		moveAllToSource() {
+			const movable = targetItems.filter((i) => !i.disabled);
+			const remaining = targetItems.filter((i) => i.disabled);
+			selectedTarget = new Set();
+			emitChange([...sourceItems, ...movable], remaining);
+		},
+		isSourceAllSelected() {
+			const selectable = sourceItems.filter((i) => !i.disabled);
+			return selectable.length > 0 && selectable.every((i) => selectedSource.has(i.key));
+		},
+		isTargetAllSelected() {
+			const selectable = targetItems.filter((i) => !i.disabled);
+			return selectable.length > 0 && selectable.every((i) => selectedTarget.has(i.key));
+		}
+	});
+</script>
+
+<div data-part="root" data-transfer-root class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='root'] {
+		container-type: inline-size;
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: 1fr;
+		align-items: stretch;
+		gap: var(--dry-space-3);
+	}
+
+	@container (max-width: 500px) {
+		[data-part='root'] {
+			grid-auto-flow: row;
+			grid-auto-columns: initial;
+		}
+	}
+</style>

package/src/transfer/transfer.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Transfer',
+	description: 'Dual-list transfer component for moving items between lists',
+	category: 'input',
+	tags: ['transfer', 'dual-list', 'move', 'select', 'shuttle']
+};

package/src/tree/context.svelte.ts

@@ -0,0 +1,24 @@
+import { createContext } from '@dryui/primitives';
+
+interface TreeContext {
+	readonly expandedItems: ReadonlySet<string>;
+	readonly selectedItem: string | null;
+	readonly focusedItem: string | null;
+	toggleItem: (id: string) => void;
+	expandItem: (id: string) => void;
+	collapseItem: (id: string) => void;
+	selectItem: (id: string) => void;
+	setFocusedItem: (id: string) => void;
+	registerBranch: (id: string) => void;
+	unregisterBranch: (id: string) => void;
+	isExpanded: (id: string) => boolean;
+	isSelected: (id: string) => boolean;
+	isFocused: (id: string) => boolean;
+	hasChildren: (id: string) => boolean;
+}
+export const [setTreeCtx, getTreeCtx] = createContext<TreeContext>('tree');
+
+interface TreeItemContext {
+	readonly itemId: string;
+}
+export const [setTreeItemCtx, getTreeItemCtx] = createContext<TreeItemContext>('tree-item');

package/src/tree/index.ts

@@ -0,0 +1,23 @@
+export type {
+	TreeRootProps,
+	TreeItemProps,
+	TreeItemLabelProps,
+	TreeItemChildrenProps
+} from '@dryui/primitives';
+
+import TreeRoot from './tree-root.svelte';
+import TreeItem from './tree-item.svelte';
+import TreeItemLabel from './tree-item-label.svelte';
+import TreeItemChildren from './tree-item-children.svelte';
+
+export const Tree: {
+	Root: typeof TreeRoot;
+	Item: typeof TreeItem;
+	ItemLabel: typeof TreeItemLabel;
+	ItemChildren: typeof TreeItemChildren;
+} = {
+	Root: TreeRoot,
+	Item: TreeItem,
+	ItemLabel: TreeItemLabel,
+	ItemChildren: TreeItemChildren
+};

package/src/tree/tree-item-children.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getTreeCtx, getTreeItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getTreeCtx();
+	const itemCtx = getTreeItemCtx();
+	const open = $derived(ctx.isExpanded(itemCtx.itemId));
+	const branchItemId = itemCtx.itemId;
+	ctx.registerBranch(branchItemId);
+	onDestroy(() => {
+		ctx.unregisterBranch(branchItemId);
+	});
+</script>
+
+<div
+	role="group"
+	aria-hidden={!open}
+	data-part="children"
+	data-state={open ? 'open' : 'closed'}
+	class={className}
+	{...rest}
+>
+	<div class="tree-item-inner">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.tree-item-inner {
+		overflow: hidden;
+	}
+
+	[data-part='children'] {
+		display: grid;
+		grid-template-rows: 0fr;
+		padding-left: var(--dry-tree-indent, var(--dry-space-4));
+		transition: grid-template-rows var(--dry-duration-normal) var(--dry-ease-default);
+	}
+
+	[data-part='children'][data-state='open'] {
+		grid-template-rows: 1fr;
+	}
+</style>

package/src/tree/tree-item-label.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getTreeCtx, getTreeItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getTreeCtx();
+	const itemCtx = getTreeItemCtx();
+</script>
+
+<div
+	data-part="label"
+	data-selected={ctx.isSelected(itemCtx.itemId) || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='label'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-tree-item-padding, var(--dry-space-1) var(--dry-space-2));
+		border: 0;
+		border-radius: var(--dry-tree-item-radius, var(--dry-radius-md));
+		background: none;
+		text-align: inherit;
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		font-family: var(--dry-font-sans);
+		color: var(--dry-color-text-strong);
+		outline: var(--dry-tree-item-focus-ring, none);
+		outline-offset: var(--dry-tree-item-focus-offset, 0px);
+		cursor: pointer;
+		user-select: none;
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-part='label']:hover {
+		background: var(--dry-tree-item-hover-bg, var(--dry-color-fill));
+	}
+
+	[data-part='label'][data-selected] {
+		background: var(--dry-tree-item-selected-bg, var(--dry-color-fill-brand-weak));
+		color: var(--dry-tree-item-selected-color, var(--dry-color-text-brand));
+		font-weight: 600;
+	}
+</style>

package/src/tree/tree-item.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getTreeCtx, setTreeItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		itemId: string;
+		children: Snippet;
+	}
+
+	let { itemId, class: className, children, ...rest }: Props = $props();
+
+	const ctx = getTreeCtx();
+	const expanded = $derived(ctx.isExpanded(itemId));
+	const focused = $derived(ctx.isFocused(itemId));
+	const hasChildren = $derived(ctx.hasChildren(itemId));
+	const selected = $derived(ctx.isSelected(itemId));
+
+	setTreeItemCtx({
+		get itemId() {
+			return itemId;
+		}
+	});
+</script>
+
+<div
+	role="treeitem"
+	tabindex={focused ? 0 : -1}
+	aria-expanded={hasChildren ? expanded : undefined}
+	aria-selected={selected}
+	data-branch={hasChildren || undefined}
+	data-part="item"
+	data-expanded={expanded || undefined}
+	data-focused={focused || undefined}
+	data-selected={selected || undefined}
+	data-item-id={itemId}
+	class={className}
+	onclick={(e) => {
+		(e.currentTarget as HTMLElement).focus();
+		ctx.selectItem(itemId);
+	}}
+	ondblclick={() => {
+		if (hasChildren) {
+			ctx.toggleItem(itemId);
+		}
+	}}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='item'] {
+		outline: none;
+		--dry-tree-item-focus-ring: none;
+		--dry-tree-item-focus-offset: 0px;
+	}
+
+	[data-part='item']:focus-visible {
+		--dry-tree-item-focus-ring: var(--dry-focus-ring);
+		--dry-tree-item-focus-offset: 2px;
+	}
+</style>