feat: tree view (pending convention update)

packages/skeleton-common/src/classes/tree-view.ts

@@ -0,0 +1,12 @@
+export const classesTreeview = {
+	root: 'flex flex-col w-fit space-y-4 rounded-base p-4',
+	tree: '',
+	label: '',
+	item: 'flex gap-2 [&selected]:preset-tonal-primary hover:preset-tonal-primary rounded-base p-2',
+	branch: 'flex flex-col gap-2 [&selected]:preset-tonal-primary hover:preset-tonal-primary rounded-base p-2',
+	branchControl: '',
+	branchText: '',
+	branchIndicator: 'inline-flex items-center transition-transform origin-center transform-fill',
+	branchContent: 'flex flex-col relative rounded-base',
+	branchIndentGuide: 'absolute h-full border-l'
+};

packages/skeleton-common/src/classes/treeview.ts

@@ -0,0 +1,12 @@
+export const classesTreeview = {
+	root: 'flex flex-col w-fit space-y-4 rounded-base p-4',
+	tree: '',
+	label: '',
+	item: 'flex gap-2 [&selected]:preset-tonal-primary hover:preset-tonal-primary rounded-base p-2',
+	branch: 'flex flex-col gap-2 [&selected]:preset-tonal-primary hover:preset-tonal-primary rounded-base p-2',
+	branchControl: '',
+	branchText: '',
+	branchIndicator: 'inline-flex items-center transition-transform origin-center transform-fill',
+	branchContent: 'flex flex-col relative rounded-base',
+	branchIndentGuide: 'absolute h-full border-l'
+};

packages/skeleton-common/src/classes/utils.ts

@@ -0,0 +1,8 @@
+export const headings = {
+	1: 'h1',
+	2: 'h2',
+	3: 'h3',
+	4: 'h4',
+	5: 'h5',
+	6: 'h6'
+} as const;

packages/skeleton-common/src/index.ts

@@ -3,3 +3,5 @@ export * from './classes/accordion.js';
 export * from './classes/avatar.js';
 export * from './classes/rating-group.js';
 export * from './classes/tabs.js';
+export * from './classes/tree-view.js';
+export * from './classes/utils.js';

packages/skeleton-svelte/package.json

@@ -40,7 +40,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/tree-view/anatomy/tree-view-branch-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewBranchContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+	import { classesTreeview } from '@skeletonlabs/skeleton-common';
+
+	const nodeContext = TreeViewNodeContext.consume();
+	const rootContext = TreeViewRootContext.consume();
+	const props: TreeViewBranchContentProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getBranchContentProps(nodeContext.nodeProps),
+			{
+				class: classesTreeview.branchContent
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-branch-control.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewBranchControlProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+	import { classesTreeview } from '@skeletonlabs/skeleton-common';
+
+	const props: TreeViewBranchControlProps = $props();
+	const nodeContext = TreeViewNodeContext.consume();
+	const rootContext = TreeViewRootContext.consume();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getBranchControlProps(nodeContext.nodeProps),
+			{
+				class: classesTreeview.branchControl
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-branch-indent-guide.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewBranchIndentGuideProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { classesTreeview } from '@skeletonlabs/skeleton-common';
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+
+	const nodeContext = TreeViewNodeContext.consume();
+	const rootContext = TreeViewRootContext.consume();
+	const props: TreeViewBranchIndentGuideProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+	const nodeState = $derived(rootContext.api.getNodeState(nodeContext.nodeProps));
+
+	const translate = $derived(`translate-[${nodeState.depth * 1.5}rem]`);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getBranchIndentGuideProps(nodeContext.nodeProps),
+			{
+				class: classesTreeview.branchIndentGuide
+			},
+			{
+				class: translate
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-branch-indicator.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewBranchIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+	import { classesTreeview } from '@skeletonlabs/skeleton-common';
+
+	const nodeContext = TreeViewNodeContext.consume();
+	const rootContext = TreeViewRootContext.consume();
+	const props: TreeViewBranchIndicatorProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getBranchIndicatorProps(nodeContext.nodeProps),
+			{
+				class: classesTreeview.branchIndicator
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<span {...attributes}>
+		{@render children?.()}
+	</span>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-branch-text.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewBranchTextProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { classesTreeview } from '@skeletonlabs/skeleton-common';
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+
+	const nodeContext = TreeViewNodeContext.consume();
+	const rootContext = TreeViewRootContext.consume();
+	const props: TreeViewBranchTextProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getBranchTextProps(nodeContext.nodeProps),
+			{
+				class: classesTreeview.branchText
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<span {...attributes}>
+		{@render children?.()}
+	</span>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-branch.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import type { NodeProps } from '@zag-js/tree-view';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewBranchProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
+		nodeProps: NodeProps;
+	}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+	import { classesTreeview } from '@skeletonlabs/skeleton-common';
+
+	const props: TreeViewBranchProps = $props();
+	const rootContext = TreeViewRootContext.consume();
+	const { nodeProps, element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getBranchProps(nodeProps),
+			{
+				class: classesTreeview.branch
+			},
+			restAttributes
+		)
+	);
+
+	TreeViewNodeContext.provide({
+		get nodeProps() {
+			return nodeProps;
+		}
+	});
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-item.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	import type { NodeProps } from '@zag-js/tree-view';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewItemProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
+		nodeProps: NodeProps;
+	}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+	import { classesTreeview } from '@skeletonlabs/skeleton-common';
+
+	const nodeContext = TreeViewNodeContext.consume();
+	const rootContext = TreeViewRootContext.consume();
+	const props: TreeViewItemProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getItemProps(nodeContext.nodeProps),
+			{
+				class: classesTreeview.item
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-label.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TreeViewLabelProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {
+		/**
+		 * The level of the label. This is used to determine the heading level for accessibility purposes.
+		 *
+		 * @defaultValue 3
+		 */
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { TreeViewRootContext } from '../modules/tree-view-root-context.js';
+	import { classesTreeview, headings } from '@skeletonlabs/skeleton-common';
+
+	const props: TreeViewLabelProps = $props();
+	const rootContext = TreeViewRootContext.consume();
+	const { level = 3, element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getLabelProps(),
+			{
+				class: classesTreeview.label
+			},
+			{
+				class: headings[level]
+			},
+			restAttributes
+		)
+	);
+
+	const tag = $derived(`h${level}`);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<svelte:element this={tag} {...attributes}>
+		{@render children?.()}
+	</svelte:element>
+{/if}

packages/skeleton-svelte/src/components/tree-view/anatomy/tree-view-node-context.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { TreeViewNodeContextType } from '../modules/tree-view-node-context.js';
+
+	export interface TreeViewNodeContextProps {
+		children: Snippet<[TreeViewNodeContextType]>;
+	}
+</script>
+
+<script lang="ts">
+	import { TreeViewNodeContext } from '../modules/tree-view-node-context.js';
+
+	const props: TreeViewNodeContextProps = $props();
+	const nodeContext = TreeViewNodeContext.consume();
+</script>
+
+{@render props.children(nodeContext)}