@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/tree-view/tree-view-branch-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewBranchTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface TreeViewBranchTriggerProps extends Assign<HTMLProps<'button'>, TreeViewBranchTriggerBaseProps> {
+}
+declare const TreeViewBranchTrigger: import("svelte").Component<TreeViewBranchTriggerProps, {}, "">;
+type TreeViewBranchTrigger = ReturnType<typeof TreeViewBranchTrigger>;
+export default TreeViewBranchTrigger;

package/dist/components/tree-view/tree-view-branch.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TreeViewBranchBaseProps extends PolymorphicProps<'li'> {}
+  export interface TreeViewBranchProps extends Assign<HTMLProps<'li'>, TreeViewBranchBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Collapsible } from '../collapsible'
+  import { useTreeViewContext } from './use-tree-view-context'
+  import { useTreeViewNodeContext } from './use-tree-view-node-context'
+  import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
+
+  const props: TreeViewBranchProps = $props()
+
+  const treeView = useTreeViewContext()
+  const nodeProps = useTreeViewNodePropsContext()
+  const nodeState = useTreeViewNodeContext()
+
+  const renderStrategyProps = useRenderStrategyPropsContext()
+  const mergedProps = $derived(mergeProps(treeView().getBranchProps(nodeProps()), props))
+  const branchContentProps = $derived(treeView().getBranchContentProps(nodeProps()))
+</script>
+
+<Collapsible.Root
+  open={nodeState().expanded}
+  ids={{ content: branchContentProps.id! }}
+  {...renderStrategyProps}
+  {...mergedProps}
+/>

package/dist/components/tree-view/tree-view-branch.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewBranchBaseProps extends PolymorphicProps<'li'> {
+}
+export interface TreeViewBranchProps extends Assign<HTMLProps<'li'>, TreeViewBranchBaseProps> {
+}
+declare const TreeViewBranch: import("svelte").Component<TreeViewBranchProps, {}, "">;
+type TreeViewBranch = ReturnType<typeof TreeViewBranch>;
+export default TreeViewBranch;

package/dist/components/tree-view/tree-view-context.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { TreeNode } from '../collection'
+  import type { UseTreeViewContext } from './use-tree-view-context'
+
+  export interface TreeViewContextProps {
+    render: Snippet<[UseTreeViewContext<TreeNode>]>
+  }
+</script>
+
+<script lang="ts">
+  import { useTreeViewContext } from './use-tree-view-context'
+
+  const { render }: TreeViewContextProps = $props()
+
+  const treeView = useTreeViewContext()
+</script>
+
+{@render render(treeView)}

package/dist/components/tree-view/tree-view-context.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { TreeNode } from '../collection';
+import type { UseTreeViewContext } from './use-tree-view-context';
+export interface TreeViewContextProps {
+    render: Snippet<[UseTreeViewContext<TreeNode>]>;
+}
+declare const TreeViewContext: import("svelte").Component<TreeViewContextProps, {}, "">;
+type TreeViewContext = ReturnType<typeof TreeViewContext>;
+export default TreeViewContext;

package/dist/components/tree-view/tree-view-item-indicator.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TreeViewItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface TreeViewItemIndicatorProps extends Assign<HTMLProps<'div'>, TreeViewItemIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTreeViewContext } from './use-tree-view-context'
+  import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
+
+  const props: TreeViewItemIndicatorProps = $props()
+
+  const treeView = useTreeViewContext()
+  const nodeProps = useTreeViewNodePropsContext()
+
+  const mergedProps = $derived(mergeProps(treeView().getItemIndicatorProps(nodeProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tree-view/tree-view-item-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewItemIndicatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface TreeViewItemIndicatorProps extends Assign<HTMLProps<'div'>, TreeViewItemIndicatorBaseProps> {
+}
+declare const TreeViewItemIndicator: import("svelte").Component<TreeViewItemIndicatorProps, {}, "">;
+type TreeViewItemIndicator = ReturnType<typeof TreeViewItemIndicator>;
+export default TreeViewItemIndicator;

package/dist/components/tree-view/tree-view-item-text.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TreeViewItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface TreeViewItemTextProps extends Assign<HTMLProps<'span'>, TreeViewItemTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTreeViewContext } from './use-tree-view-context'
+  import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
+
+  const props: TreeViewItemTextProps = $props()
+
+  const treeView = useTreeViewContext()
+  const nodeProps = useTreeViewNodePropsContext()
+
+  const mergedProps = $derived(mergeProps(treeView().getItemTextProps(nodeProps()), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/tree-view/tree-view-item-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewItemTextBaseProps extends PolymorphicProps<'span'> {
+}
+export interface TreeViewItemTextProps extends Assign<HTMLProps<'span'>, TreeViewItemTextBaseProps> {
+}
+declare const TreeViewItemText: import("svelte").Component<TreeViewItemTextProps, {}, "">;
+type TreeViewItemText = ReturnType<typeof TreeViewItemText>;
+export default TreeViewItemText;

package/dist/components/tree-view/tree-view-item.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TreeViewItemBaseProps extends PolymorphicProps<'li'> {}
+  export interface TreeViewItemProps extends Assign<HTMLProps<'li'>, TreeViewItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTreeViewContext } from './use-tree-view-context'
+  import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
+
+  const props: TreeViewItemProps = $props()
+
+  const treeView = useTreeViewContext()
+  const nodeProps = useTreeViewNodePropsContext()
+  const mergedProps = $derived(mergeProps(treeView().getItemProps(nodeProps()), props))
+</script>
+
+<Ark as="li" {...mergedProps} />

package/dist/components/tree-view/tree-view-item.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewItemBaseProps extends PolymorphicProps<'li'> {
+}
+export interface TreeViewItemProps extends Assign<HTMLProps<'li'>, TreeViewItemBaseProps> {
+}
+declare const TreeViewItem: import("svelte").Component<TreeViewItemProps, {}, "">;
+type TreeViewItem = ReturnType<typeof TreeViewItem>;
+export default TreeViewItem;

package/dist/components/tree-view/tree-view-label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TreeViewLabelBaseProps extends PolymorphicProps<'h3'> {}
+  export interface TreeViewLabelProps extends Assign<HTMLProps<'h3'>, TreeViewLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTreeViewContext } from './use-tree-view-context'
+
+  const props: TreeViewLabelProps = $props()
+
+  const treeView = useTreeViewContext()
+  const mergedProps = $derived(mergeProps(treeView().getLabelProps(), props))
+</script>
+
+<Ark as="h3" {...mergedProps} />

package/dist/components/tree-view/tree-view-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewLabelBaseProps extends PolymorphicProps<'h3'> {
+}
+export interface TreeViewLabelProps extends Assign<HTMLProps<'h3'>, TreeViewLabelBaseProps> {
+}
+declare const TreeViewLabel: import("svelte").Component<TreeViewLabelProps, {}, "">;
+type TreeViewLabel = ReturnType<typeof TreeViewLabel>;
+export default TreeViewLabel;

package/dist/components/tree-view/tree-view-node-context.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseTreeViewNodeContext } from './use-tree-view-node-context'
+  import type { TreeNode } from '@zag-js/collection'
+
+  export interface TreeViewNodeContextProps {
+    render: Snippet<[UseTreeViewNodeContext]>
+  }
+</script>
+
+<script lang="ts" generics="T extends TreeNode">
+  import { useTreeViewNodeContext } from './use-tree-view-node-context'
+
+  const { render }: TreeViewNodeContextProps = $props()
+
+  const nodeContext = useTreeViewNodeContext()
+</script>
+
+{@render render(nodeContext)}

package/dist/components/tree-view/tree-view-node-context.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { UseTreeViewNodeContext } from './use-tree-view-node-context';
+import type { TreeNode } from '@zag-js/collection';
+export interface TreeViewNodeContextProps {
+    render: Snippet<[UseTreeViewNodeContext]>;
+}
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): TreeViewNodeContextProps;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TreeNode>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TreeNode>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TreeViewNodeContext: $$IsomorphicComponent;
+type TreeViewNodeContext<T extends TreeNode> = InstanceType<typeof TreeViewNodeContext<T>>;
+export default TreeViewNodeContext;

package/dist/components/tree-view/tree-view-node-provider.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { TreeNode } from '../collection'
+
+  export interface TreeViewNodeProviderBaseProps<T extends TreeNode> {
+    node: T
+    indexPath: number[]
+  }
+  export interface TreeViewNodeProviderProps<T extends TreeNode> extends TreeViewNodeProviderBaseProps<T> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts" generics="T extends TreeNode">
+  import { useTreeViewContext } from './use-tree-view-context'
+  import { TreeViewNodeProvider } from './use-tree-view-node-context'
+  import { TreeViewNodePropsProvider } from './use-tree-view-node-props-context'
+
+  let { node, indexPath, children }: TreeViewNodeProviderProps<T> = $props()
+
+  const treeView = useTreeViewContext()
+  const nodeProps = $derived({ node, indexPath })
+  const nodeState = $derived(treeView().getNodeState(nodeProps))
+
+  TreeViewNodeProvider(() => nodeState)
+  TreeViewNodePropsProvider(() => nodeProps)
+</script>
+
+{@render children?.()}

package/dist/components/tree-view/tree-view-node-provider.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { TreeNode } from '../collection';
+export interface TreeViewNodeProviderBaseProps<T extends TreeNode> {
+    node: T;
+    indexPath: number[];
+}
+export interface TreeViewNodeProviderProps<T extends TreeNode> extends TreeViewNodeProviderBaseProps<T> {
+    children?: Snippet;
+}
+import { TreeViewNodeProvider } from './use-tree-view-node-context';
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): TreeViewNodeProviderProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TreeNode>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TreeNode>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TreeViewNodeProvider: $$IsomorphicComponent;
+type TreeViewNodeProvider<T extends TreeNode> = InstanceType<typeof TreeViewNodeProvider<T>>;
+export default TreeViewNodeProvider;

package/dist/components/tree-view/tree-view-root-provider.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { TreeNode } from '../collection'
+  import type { UseTreeViewReturn } from './use-tree-view.svelte'
+
+  export interface TreeViewRootProviderBaseProps<T extends TreeNode>
+    extends RenderStrategyProps,
+      PolymorphicProps<'div'> {
+    value: UseTreeViewReturn<T>
+  }
+  export interface TreeViewRootProviderProps<T extends TreeNode>
+    extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {}
+</script>
+
+<script lang="ts" generics="T extends TreeNode">
+  import {
+    RenderStrategyPropsProvider,
+    splitRenderStrategyProps,
+    type RenderStrategyProps,
+  } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { TreeViewProvider } from './use-tree-view-context'
+
+  const { value, ...props }: TreeViewRootProviderProps<T> = $props()
+
+  const [renderStrategyProps, treeViewProps] = $derived(splitRenderStrategyProps(props))
+  const mergedProps = $derived(mergeProps(value().getRootProps(), treeViewProps))
+
+  TreeViewProvider(value)
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tree-view/tree-view-root-provider.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { TreeNode } from '../collection';
+import type { UseTreeViewReturn } from './use-tree-view.svelte';
+export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends RenderStrategyProps, PolymorphicProps<'div'> {
+    value: UseTreeViewReturn<T>;
+}
+export interface TreeViewRootProviderProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {
+}
+import { type RenderStrategyProps } from '../../utils/render-strategy';
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): TreeViewRootProviderProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TreeNode>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TreeNode>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TreeViewRootProvider: $$IsomorphicComponent;
+type TreeViewRootProvider<T extends TreeNode> = InstanceType<typeof TreeViewRootProvider<T>>;
+export default TreeViewRootProvider;

package/dist/components/tree-view/tree-view-root.svelte

@@ -0,0 +1,65 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { TreeNode } from '../collection'
+  import type { UseTreeViewProps } from './use-tree-view.svelte'
+
+  export interface TreeViewRootBaseProps<T extends TreeNode>
+    extends UseTreeViewProps<T>,
+      RenderStrategyProps,
+      PolymorphicProps<'div'> {}
+
+  export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {}
+</script>
+
+<script lang="ts" generics="T extends TreeNode">
+  import {
+    RenderStrategyPropsProvider,
+    splitRenderStrategyProps,
+    type RenderStrategyProps,
+  } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { splitTreeViewProps } from './tree-view-split-props'
+  import { TreeViewProvider } from './use-tree-view-context'
+  import { useTreeView } from './use-tree-view.svelte'
+
+  let {
+    expandedValue = $bindable<string[]>(),
+    selectedValue = $bindable<string[]>(),
+    focusedValue = $bindable<string>(),
+    ...props
+  }: TreeViewRootProps<T> = $props()
+
+  const [renderStrategyProps, treeViewProps] = $derived(splitRenderStrategyProps(props))
+  const [useTreeViewProps, localProps] = $derived(splitTreeViewProps(treeViewProps))
+
+  const id = $props.id()
+
+  const machineProps = $derived.by(() => ({
+    ...useTreeViewProps,
+    id: useTreeViewProps.id ?? id,
+    selectedValue,
+    expandedValue,
+    focusedValue,
+    onExpandedChange: (details: any) => {
+      useTreeViewProps.onExpandedChange?.(details)
+      expandedValue = details.expandedValue
+    },
+    onFocusChange: (details: any) => {
+      useTreeViewProps.onFocusChange?.(details)
+      focusedValue = details.focusedValue
+    },
+    onSelectionChange: (details: any) => {
+      useTreeViewProps.onSelectionChange?.(details)
+      selectedValue = details.selectedValue
+    },
+  }))
+
+  const treeView = useTreeView(() => machineProps)
+  const mergedProps = $derived(mergeProps(treeView().getRootProps(), localProps))
+
+  TreeViewProvider(treeView)
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tree-view/tree-view-root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { TreeNode } from '../collection';
+import type { UseTreeViewProps } from './use-tree-view.svelte';
+export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewProps<T>, RenderStrategyProps, PolymorphicProps<'div'> {
+}
+export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {
+}
+import { type RenderStrategyProps } from '../../utils/render-strategy';
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): TreeViewRootProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "focusedValue" | "expandedValue" | "selectedValue";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TreeNode>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TreeNode>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TreeViewRoot: $$IsomorphicComponent;
+type TreeViewRoot<T extends TreeNode> = InstanceType<typeof TreeViewRoot<T>>;
+export default TreeViewRoot;

package/dist/components/tree-view/tree-view-split-props.d.ts

@@ -0,0 +1,3 @@
+import type { TreeNode } from '../collection';
+import type { UseTreeViewProps } from './use-tree-view.svelte';
+export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "collection" | "focusedValue" | "selectionMode" | "typeahead" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "onExpandedChange" | "onSelectionChange" | "onLoadChildrenComplete" | "expandOnClick" | "loadChildren">];

package/dist/components/tree-view/tree-view-split-props.js

@@ -0,0 +1,22 @@
+import { createSplitProps } from '../../utils/create-split-props';
+const splitFn = createSplitProps();
+export function splitTreeViewProps(props) {
+    return splitFn(props, [
+        'collection',
+        'defaultExpandedValue',
+        'defaultSelectedValue',
+        'expandedValue',
+        'expandOnClick',
+        'focusedValue',
+        'id',
+        'ids',
+        'onExpandedChange',
+        'onFocusChange',
+        'onSelectionChange',
+        'selectedValue',
+        'selectionMode',
+        'typeahead',
+        'loadChildren',
+        'onLoadChildrenComplete',
+    ]);
+}

package/dist/components/tree-view/tree-view-tree.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TreeViewTreeBaseProps extends PolymorphicProps<'ul'> {}
+  export interface TreeViewTreeProps extends Assign<HTMLProps<'ul'>, TreeViewTreeBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTreeViewContext } from './use-tree-view-context'
+
+  const props: TreeViewTreeProps = $props()
+
+  const treeView = useTreeViewContext()
+  const mergedProps = $derived(mergeProps(treeView().getTreeProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tree-view/tree-view-tree.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewTreeBaseProps extends PolymorphicProps<'ul'> {
+}
+export interface TreeViewTreeProps extends Assign<HTMLProps<'ul'>, TreeViewTreeBaseProps> {
+}
+declare const TreeViewTree: import("svelte").Component<TreeViewTreeProps, {}, "">;
+type TreeViewTree = ReturnType<typeof TreeViewTree>;
+export default TreeViewTree;

package/dist/components/tree-view/tree-view.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';

package/dist/components/tree-view/tree-view.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';

package/dist/components/tree-view/tree-view.d.ts

@@ -0,0 +1,18 @@
+export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails, LoadChildrenDetails, LoadChildrenCompleteDetails, NodeState, NodeProps, } from '@zag-js/tree-view';
+export { default as Branch, type TreeViewBranchBaseProps as BranchBaseProps, type TreeViewBranchProps as BranchProps, } from './tree-view-branch.svelte';
+export { default as BranchContent, type TreeViewBranchContentBaseProps as BranchContentBaseProps, type TreeViewBranchContentProps as BranchContentProps, } from './tree-view-branch-content.svelte';
+export { default as BranchControl, type TreeViewBranchControlBaseProps as BranchControlBaseProps, type TreeViewBranchControlProps as BranchControlProps, } from './tree-view-branch-control.svelte';
+export { default as BranchIndentGuide, type TreeViewBranchIndentGuideBaseProps as BranchIndentGuideBaseProps, type TreeViewBranchIndentGuideProps as BranchIndentGuideProps, } from './tree-view-branch-indent-guide.svelte';
+export { default as BranchIndicator, type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, type TreeViewBranchIndicatorProps as BranchIndicatorProps, } from './tree-view-branch-indicator.svelte';
+export { default as BranchText, type TreeViewBranchTextBaseProps as BranchTextBaseProps, type TreeViewBranchTextProps as BranchTextProps, } from './tree-view-branch-text.svelte';
+export { default as BranchTrigger, type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, type TreeViewBranchTriggerProps as BranchTriggerProps, } from './tree-view-branch-trigger.svelte';
+export { default as Context, type TreeViewContextProps as ContextProps } from './tree-view-context.svelte';
+export { default as Item, type TreeViewItemBaseProps as ItemBaseProps, type TreeViewItemProps as ItemProps, } from './tree-view-item.svelte';
+export { default as ItemIndicator, type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, type TreeViewItemIndicatorProps as ItemIndicatorProps, } from './tree-view-item-indicator.svelte';
+export { default as ItemText, type TreeViewItemTextBaseProps as ItemTextBaseProps, type TreeViewItemTextProps as ItemTextProps, } from './tree-view-item-text.svelte';
+export { default as Label, type TreeViewLabelBaseProps as LabelBaseProps, type TreeViewLabelProps as LabelProps, } from './tree-view-label.svelte';
+export { default as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context.svelte';
+export { default as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider.svelte';
+export { default as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootProps as RootProps, } from './tree-view-root.svelte';
+export { default as RootProvider, type TreeViewRootProviderBaseProps as RootProviderBaseProps, type TreeViewRootProviderProps as RootProviderProps, } from './tree-view-root-provider.svelte';
+export { default as Tree, type TreeViewTreeBaseProps as TreeBaseProps, type TreeViewTreeProps as TreeProps, } from './tree-view-tree.svelte';

package/dist/components/tree-view/tree-view.js

@@ -0,0 +1,17 @@
+export { default as Branch, } from './tree-view-branch.svelte';
+export { default as BranchContent, } from './tree-view-branch-content.svelte';
+export { default as BranchControl, } from './tree-view-branch-control.svelte';
+export { default as BranchIndentGuide, } from './tree-view-branch-indent-guide.svelte';
+export { default as BranchIndicator, } from './tree-view-branch-indicator.svelte';
+export { default as BranchText, } from './tree-view-branch-text.svelte';
+export { default as BranchTrigger, } from './tree-view-branch-trigger.svelte';
+export { default as Context } from './tree-view-context.svelte';
+export { default as Item, } from './tree-view-item.svelte';
+export { default as ItemIndicator, } from './tree-view-item-indicator.svelte';
+export { default as ItemText, } from './tree-view-item-text.svelte';
+export { default as Label, } from './tree-view-label.svelte';
+export { default as NodeContext, } from './tree-view-node-context.svelte';
+export { default as NodeProvider, } from './tree-view-node-provider.svelte';
+export { default as Root, } from './tree-view-root.svelte';
+export { default as RootProvider, } from './tree-view-root-provider.svelte';
+export { default as Tree, } from './tree-view-tree.svelte';

package/dist/components/tree-view/use-tree-view-context.d.ts

@@ -0,0 +1,5 @@
+import type { TreeNode } from '../collection';
+import type { UseTreeViewReturn } from './use-tree-view.svelte';
+export interface UseTreeViewContext<T extends TreeNode> extends UseTreeViewReturn<T> {
+}
+export declare const TreeViewProvider: (opts: UseTreeViewContext<any>) => void, useTreeViewContext: (fallback?: UseTreeViewContext<any> | undefined) => UseTreeViewContext<any>;

package/dist/components/tree-view/use-tree-view-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [TreeViewProvider, useTreeViewContext] = createContext({
+    name: 'TreeViewContext',
+    hookName: 'useTreeViewContext',
+    providerName: '<TreeViewProvider />',
+});

package/dist/components/tree-view/use-tree-view-node-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { NodeState } from '@zag-js/tree-view';
+export interface UseTreeViewNodeContext extends Accessor<NodeState> {
+}
+export declare const TreeViewNodeProvider: (opts: UseTreeViewNodeContext) => void, useTreeViewNodeContext: (fallback?: UseTreeViewNodeContext | undefined) => UseTreeViewNodeContext;

package/dist/components/tree-view/use-tree-view-node-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext({
+    name: 'TreeViewNodeContext',
+    hookName: 'useTreeViewNodeContext',
+    providerName: '<TreeViewNodeProvider />',
+});

package/dist/components/tree-view/use-tree-view-node-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { NodeProps } from '@zag-js/tree-view';
+export interface UseTreeViewNodePropsContext extends Accessor<NodeProps> {
+}
+export declare const TreeViewNodePropsProvider: (opts: UseTreeViewNodePropsContext) => void, useTreeViewNodePropsContext: (fallback?: UseTreeViewNodePropsContext | undefined) => UseTreeViewNodePropsContext;

package/dist/components/tree-view/use-tree-view-node-props-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [TreeViewNodePropsProvider, useTreeViewNodePropsContext] = createContext({
+    name: 'TreeViewNodePropsContext',
+    hookName: 'useTreeViewNodePropsContext',
+    providerName: '<TreeViewNodePropsProvider />',
+});