feat: tree

package.json

@@ -23,6 +23,7 @@
 		"@fontsource-variable/inter": "^5.2.5",
 		"@fontsource/dm-serif-display": "^5.2.5",
 		"@fontsource/jetbrains-mono": "^5.2.5",
+		"@headless-tree/core": "^1.0.1",
 		"@internationalized/date": "^3.8.0",
 		"@lucide/svelte": "^0.511.0",
 		"@tanstack/table-core": "^8.21.3",
@@ -33,6 +34,7 @@
 		"runed": "^0.28.0",
 		"svelte-sonner": "^0.3.28",
 		"svelte-tel-input": "^3.6.0",
+		"svelte-toolbelt": "^0.9.1",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
 		"vaul-svelte": "1.0.0-next.2",

src/lib/componentRegistry.components.ts

@@ -2,7 +2,7 @@
 /**
  * !!!!!!!!!!
  * This file is auto-generated. Do not edit manually
- * Last generated at: 5/24/2025, 7:36:58 PM
+ * Last generated at: 5/25/2025, 7:58:07 PM
  * To update, run: pnpm generate:registry --format
  * @version 0.0.1
  * !!!!!!!!!!
@@ -730,6 +730,24 @@ export const OUI_DIRECTORIES = {
 			todo: 0,
 			ready: 12
 		}
+	},
+	TREES: {
+		directory: 'trees',
+		name: 'Trees',
+		components: [
+			'tree-01.svelte',
+			'tree-02.svelte',
+			'tree-03.svelte',
+			'tree-04.svelte',
+			'tree-05.svelte',
+			'tree-06.svelte',
+			'tree-07.svelte',
+			'tree-08.svelte'
+		],
+		status: {
+			todo: 0,
+			ready: 8
+		}
 	}
 } as const;
 export type OUIDirectories = typeof OUI_DIRECTORIES;

src/lib/componentRegistry.types.ts

@@ -2,7 +2,7 @@
 /**
  * !!!!!!!!!!
  * This file is auto-generated. Do not edit manually
- * Last generated at: 5/24/2025, 7:36:58 PM
+ * Last generated at: 5/25/2025, 7:58:07 PM
  * To update, run: pnpm generate:registry --format
  * @version 0.0.1
  * !!!!!!!!!!
@@ -110,6 +110,7 @@ export type OUITabsComponents = OUIComponentHelper<'TABS'>;
 export type OUITextareasComponents = OUIComponentHelper<'TEXTAREAS'>;
 export type OUITimelinesComponents = OUIComponentHelper<'TIMELINES'>;
 export type OUITooltipsComponents = OUIComponentHelper<'TOOLTIPS'>;
+export type OUITreesComponents = OUIComponentHelper<'TREES'>;
 
 // All Component Types
 export type OUIComponent = Prettify<
@@ -136,6 +137,7 @@ export type OUIComponent = Prettify<
 	| OUITextareasComponents
 	| OUITimelinesComponents
 	| OUITooltipsComponents
+	| OUITreesComponents
 >;
 
 // Directory To Component
@@ -163,4 +165,5 @@ export type OUIDirectoryToComponent = Prettify<{
 	textareas: OUITextareasComponents;
 	timelines: OUITimelinesComponents;
 	tooltips: OUITooltipsComponents;
+	trees: OUITreesComponents;
 }>;

src/lib/components/trees/tree-01.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { ItemInstance } from '@headless-tree/core';
+
+	import { hotkeysCoreFeature, syncDataLoaderFeature } from '@headless-tree/core';
+	import { Tree, TreeItem, TreeLabel, useTree } from '$lib/components/ui/tree';
+
+	interface Item {
+		children?: string[];
+		name: string;
+	}
+	const items: Record<string, Item> = {
+		apis: { name: 'APIs' },
+		backend: { children: ['apis', 'infrastructure'], name: 'Backend' },
+		company: {
+			children: ['engineering', 'marketing', 'operations'],
+			name: 'Company'
+		},
+		components: { name: 'Components' },
+		content: { name: 'Content' },
+		'design-system': {
+			children: ['components', 'tokens', 'guidelines'],
+			name: 'Design System'
+		},
+		engineering: {
+			children: ['frontend', 'backend', 'platform-team'],
+			name: 'Engineering'
+		},
+		finance: { name: 'Finance' },
+		frontend: { children: ['design-system', 'web-platform'], name: 'Frontend' },
+		guidelines: { name: 'Guidelines' },
+		hr: { name: 'HR' },
+		infrastructure: { name: 'Infrastructure' },
+		marketing: { children: ['content', 'seo'], name: 'Marketing' },
+		operations: { children: ['hr', 'finance'], name: 'Operations' },
+		'platform-team': { name: 'Platform Team' },
+		seo: { name: 'SEO' },
+		tokens: { name: 'Tokens' },
+		'web-platform': { name: 'Web Platform' }
+	};
+
+	const indent = 20;
+
+	const tree = useTree<Item>({
+		dataLoader: {
+			getChildren: (itemId: string) => items[itemId].children ?? [],
+			getItem: (itemId: string) => items[itemId]
+		},
+		features: [syncDataLoaderFeature, hotkeysCoreFeature],
+		getItemName: (item: ItemInstance<Item>) => item.getItemData().name,
+		indent,
+		initialState: {
+			expandedItems: ['engineering', 'frontend', 'design-system']
+		},
+		isItemFolder: (item: ItemInstance<Item>) => (item.getItemData()?.children?.length ?? 0) > 0,
+		rootItemId: 'company'
+	});
+</script>
+
+<div class="flex h-full flex-col gap-2 *:first:grow">
+	<Tree
+		class="relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]"
+		{indent}
+		{tree}
+	>
+		{#each tree.current.getItems() as item (item.getId())}
+			<TreeItem {item}>
+				<TreeLabel>
+					{item.getItemData().name}
+				</TreeLabel>
+			</TreeItem>
+		{/each}
+	</Tree>
+	<p aria-live="polite" role="region" class="mt-2 text-xs text-muted-foreground">
+		Basic tree with no extra features ∙
+		<a
+			href="https://headless-tree.lukasbach.com"
+			class="underline hover:text-foreground"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Headless Tree
+		</a>
+		∙
+		<a
+			href="https://github.com/max-got/originui-svelte/blob/main/src/lib/components/ui/tree/use-tree.svelte.ts"
+			class="underline hover:text-foreground"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Svelte Integration
+		</a>
+	</p>
+</div>

src/lib/components/trees/tree-02.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { hotkeysCoreFeature, syncDataLoaderFeature } from '@headless-tree/core';
+	import { Tree, TreeItem, TreeLabel, useTree } from '$lib/components/ui/tree';
+
+	interface Item {
+		children?: string[];
+		name: string;
+	}
+	const items: Record<string, Item> = {
+		apis: { name: 'APIs' },
+		backend: { children: ['apis', 'infrastructure'], name: 'Backend' },
+		company: {
+			children: ['engineering', 'marketing', 'operations'],
+			name: 'Company'
+		},
+		components: { name: 'Components' },
+		content: { name: 'Content' },
+		'design-system': {
+			children: ['components', 'tokens', 'guidelines'],
+			name: 'Design System'
+		},
+		engineering: {
+			children: ['frontend', 'backend', 'platform-team'],
+			name: 'Engineering'
+		},
+		finance: { name: 'Finance' },
+		frontend: { children: ['design-system', 'web-platform'], name: 'Frontend' },
+		guidelines: { name: 'Guidelines' },
+		hr: { name: 'HR' },
+		infrastructure: { name: 'Infrastructure' },
+		marketing: { children: ['content', 'seo'], name: 'Marketing' },
+		operations: { children: ['hr', 'finance'], name: 'Operations' },
+		'platform-team': { name: 'Platform Team' },
+		seo: { name: 'SEO' },
+		tokens: { name: 'Tokens' },
+		'web-platform': { name: 'Web Platform' }
+	};
+
+	const indent = 20;
+
+	const tree = useTree<Item>({
+		dataLoader: {
+			getChildren: (itemId) => items[itemId].children ?? [],
+			getItem: (itemId) => items[itemId]
+		},
+		features: [syncDataLoaderFeature, hotkeysCoreFeature],
+		getItemName: (item) => item.getItemData().name,
+		indent,
+		initialState: {
+			expandedItems: ['engineering', 'frontend', 'design-system']
+		},
+		isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,
+		rootItemId: 'company'
+	});
+</script>
+
+<div class="flex h-full flex-col gap-2 *:first:grow">
+	<div>
+		<Tree
+			class="relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),hsl(var(--border))_calc(var(--tree-indent)-1px),hsl(var(--border))_calc(var(--tree-indent)))]"
+			{indent}
+			{tree}
+		>
+			{#each tree.current.getItems() as item (item.getId())}
+				<TreeItem {item}>
+					<TreeLabel
+						class="relative before:absolute before:-inset-y-0.5 before:inset-x-0 before:-z-10 before:bg-background"
+					/>
+				</TreeItem>
+			{/each}
+		</Tree>
+		<p aria-live="polite" role="region" class="mt-2 text-xs text-muted-foreground">
+			Basic tree with vertical lines ∙
+			<a
+				href="https://headless-tree.lukasbach.com"
+				class="underline hover:text-foreground"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				Headless Tree
+			</a>
+			∙
+			<a
+				href="https://github.com/max-got/originui-svelte/blob/main/src/lib/components/ui/tree/use-tree.svelte.ts"
+				class="underline hover:text-foreground"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				Svelte Integration
+			</a>
+		</p>
+	</div>
+</div>