feat: add tree view

.changeset/neat-bushes-thank.md

@@ -0,0 +1,7 @@
+---
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+feat: add new `TreeView` component.
+

packages/skeleton-svelte/package.json

@@ -39,7 +39,8 @@
 		"@zag-js/tabs": "catalog:",
 		"@zag-js/tags-input": "catalog:",
 		"@zag-js/toast": "catalog:",
-		"@zag-js/tooltip": "catalog:"
+		"@zag-js/tooltip": "catalog:",
+		"@zag-js/tree-view": "catalog:"
 	},
 	"peerDependencies": {
 		"svelte": "^5.20.0"

packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { getTreeContext } from './context.js';
+	import TreeNode from './TreeNode.svelte';
+	import type { TreeBranchProps } from './types.js';
+
+	let {
+		id,
+		value,
+		children,
+		disabled = false,
+		// Control
+		base = 'flex gap-2',
+		background = '',
+		selected = 'preset-tonal-primary',
+		spaceY = '',
+		hover = 'hover:preset-tonal-primary',
+		border = 'rounded-base',
+		padding = 'p-2',
+		shadow = '',
+		classes = '',
+		// Content
+		contentBase = 'flex',
+		contentBackground = '',
+		contentSpaceY = '',
+		contentBorder = border,
+		contentPadding = '',
+		contentShadow = '',
+		contentClasses = '',
+		// Indent
+		indentAmount = 'w-6',
+		// Indicator
+		indicatorBase = 'inline-flex items-center',
+		indicatorRotationClass = 'rotate-90',
+		indicatorTransition = 'transition-transform origin-center transform-fill',
+		// Snippets
+		icon,
+		indicator
+	}: TreeBranchProps = $props();
+
+	const treeContext = getTreeContext();
+
+	const rxSelected = $derived([treeContext.api?.selectedValue.includes(id) && selected]);
+	const rxIndicatorRotation = $derived([treeContext.api?.expandedValue.includes(id) && indicatorRotationClass]);
+</script>
+
+<!-- @component A Branch of a TreeView. -->
+
+<TreeNode {id} {value} {disabled}>
+	{#snippet content({ node: nodeData, nodeProps })}
+		<!-- Branch -->
+		<div {...treeContext.api?.getBranchProps(nodeProps)} data-testid="tree-branch">
+			<!-- Control -->
+			<button
+				class="{base} {background} {spaceY} {hover} {border} {padding} {shadow} {classes} {rxSelected}"
+				{...treeContext.api?.getBranchControlProps(nodeProps)}
+				data-testid="tree-branch-control"
+				type="button"
+			>
+				<!-- Indicator -->
+				<span
+					class="{indicatorBase} {indicatorTransition} {rxIndicatorRotation}"
+					{...treeContext.api?.getBranchIndicatorProps(nodeProps)}
+					data-testid="tree-indicator"
+				>
+					{#if indicator}
+						{@render indicator()}
+					{:else}
+						{@render chevron()}
+					{/if}
+				</span>
+				<!-- Icon -->
+				{#if icon}
+					<div data-testid="tree-branch-icon">
+						{@render icon()}
+					</div>
+				{/if}
+				<!-- Text -->
+				<span {...treeContext.api?.getBranchTextProps(nodeProps)} data-testid="tree-branch-text">
+					{nodeData.value}
+				</span>
+			</button>
+
+			<!-- Content -->
+			<div
+				class="{contentBase} {contentBackground} {contentSpaceY} {contentBorder} {contentPadding} {contentShadow} {contentClasses}"
+				{...treeContext.api?.getBranchContentProps(nodeProps)}
+				data-testid="tree-content"
+			>
+				<!-- IndentGuide -->
+				<div {...treeContext.api?.getBranchIndentGuideProps(nodeProps)} class={indentAmount}></div>
+				<!-- Children -->
+				<div>
+					{@render children()}
+				</div>
+			</div>
+		</div>
+	{/snippet}
+</TreeNode>
+
+{#snippet chevron()}
+	<svg
+		stroke="currentColor"
+		fill="none"
+		stroke-width="2"
+		viewBox="0 0 24 24"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		height="1em"
+		width="1em"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path d="m9 18 6-6-6-6" />
+	</svg>
+{/snippet}

packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { getTreeContext } from './context.js';
+	import TreeNode from './TreeNode.svelte';
+	import type { TreeItemProps } from './types.js';
+
+	let {
+		id,
+		value,
+		disabled = false,
+		// Item
+		base = 'flex gap-2',
+		background = '',
+		selected = 'preset-tonal-primary',
+		spaceY = '',
+		hover = 'hover:preset-tonal-primary',
+		border = 'rounded-base',
+		padding = 'p-2',
+		shadow = '',
+		classes = '',
+		// Snippets
+		icon
+	}: TreeItemProps = $props();
+
+	const treeContext = getTreeContext();
+
+	const rxSelected = $derived([treeContext.api?.selectedValue.includes(id) && selected]);
+</script>
+
+<!-- @component An Item of a TreeView. -->
+
+<TreeNode {id} {value} {disabled}>
+	{#snippet content({ node, nodeProps })}
+		{#if node != null}
+			<!-- Item -->
+			<button
+				class="{base} {background} {spaceY} {hover} {border} {padding} {shadow} {classes} {rxSelected}"
+				{...treeContext.api?.getItemProps(nodeProps)}
+				data-testid="tree-item"
+				type="button"
+			>
+				<!-- Icon -->
+				{#if icon}
+					<div data-testid="tree-item-icon">
+						{@render icon()}
+					</div>
+				{/if}
+				<!-- Text -->
+				<span {...treeContext.api?.getItemTextProps(nodeProps)} data-testid="tree-item-text">
+					{node.value}
+				</span>
+			</button>
+		{/if}
+	{/snippet}
+</TreeNode>

packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { CollectionNode, NodeContext, TreeNodeProps } from './types.js';
+	import { getNodeContext, getTreeContext, setNodeContext } from './context.js';
+
+	const { id, value, content }: TreeNodeProps = $props();
+
+	const treeContext = getTreeContext();
+	const parentNodeContext = getNodeContext();
+
+	let childNodes = $state<CollectionNode[]>([]);
+	let isRegistered = $state(false);
+	let currentIndexPath = $state<number[]>([]);
+
+	const nodeData: CollectionNode = $derived({
+		id,
+		value,
+		indexPath: currentIndexPath,
+		children: childNodes
+	});
+
+	const updateSelf = () => {
+		if (parentNodeContext) {
+			parentNodeContext.updateChild(nodeData);
+		} else {
+			treeContext.updateNode(nodeData);
+		}
+	};
+
+	const registerChild = (child: CollectionNode) => {
+		const childIndex = childNodes.length;
+		const childWithIndex = { ...child, indexPath: [...nodeData.indexPath, childIndex] };
+		childNodes = [...childNodes, childWithIndex];
+
+		updateSelf();
+		return childWithIndex.indexPath;
+	};
+
+	const unregisterChild = (childId: string) => {
+		childNodes = childNodes.filter((child) => child.id !== childId);
+		childNodes = childNodes.map((child, index) => ({
+			...child,
+			indexPath: [...nodeData.indexPath, index]
+		}));
+
+		updateSelf();
+	};
+
+	const updateChild = (updatedChild: CollectionNode) => {
+		const index = childNodes.findIndex((child) => child.id === updatedChild.id);
+		if (index !== -1) {
+			childNodes[index] = {
+				...updatedChild,
+				indexPath: [...nodeData.indexPath, index]
+			};
+			childNodes = [...childNodes]; // Trigger reactivity
+
+			// Bubble up the change
+			updateSelf();
+		}
+	};
+
+	const nodeContextData: NodeContext = {
+		get node() {
+			return nodeData;
+		},
+		registerChild,
+		unregisterChild,
+		updateChild
+	};
+
+	setNodeContext(nodeContextData);
+
+	const nodeProps = $derived({
+		indexPath: currentIndexPath,
+		node: nodeData
+	});
+
+	onMount(() => {
+		if (parentNodeContext) {
+			// Register with parent node context and get index
+			currentIndexPath = parentNodeContext.registerChild(nodeData);
+		} else {
+			// For root nodes, register with tree context and get index
+			currentIndexPath = treeContext.registerNode(nodeData);
+		}
+		isRegistered = true;
+
+		return () => {
+			if (isRegistered) {
+				if (parentNodeContext) {
+					parentNodeContext.unregisterChild(id);
+				} else {
+					treeContext.unregisterNode(id);
+				}
+			}
+		};
+	});
+</script>
+
+{#if isRegistered}
+	{@render content({ node: nodeData, nodeProps })}
+{/if}