@destyler-ui/svelte 0.0.1-beta.17

package/dist/components/tree/components/Label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+
+  export interface TreeLabelBaseProps extends PolymorphicProps<'h3'> {}
+  export interface TreeLabelProps extends Assign<HTMLProps<'h3'>, TreeLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { useTreeContext } from '../hooks/use-tree-context'
+
+  const props: TreeLabelProps = $props()
+
+  const tree = useTreeContext()
+  const mergedProps = $derived(mergeProps(tree().getLabelProps(), props))
+</script>
+
+<UI as="h3" {...mergedProps} />

package/dist/components/tree/components/Label.svelte.d.ts

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

package/dist/components/tree/components/NodeContext.d.svelte.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { UseTreeNodeContext } from '../hooks/use-tree-node-context.js';
+import type { TreeNode } from '@destyler/collection';
+export interface TreeNodeContextProps {
+    render: Snippet<[UseTreeNodeContext]>;
+}
+declare function $$render<T extends TreeNode>(): {
+    props: TreeNodeContextProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 NodeContext: $$IsomorphicComponent;
+type NodeContext<T extends TreeNode> = InstanceType<typeof NodeContext<T>>;
+export default NodeContext;

package/dist/components/tree/components/NodeContext.svelte

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

package/dist/components/tree/components/NodeContext.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { UseTreeNodeContext } from '../hooks/use-tree-node-context.js';
+import type { TreeNode } from '@destyler/collection';
+export interface TreeNodeContextProps {
+    render: Snippet<[UseTreeNodeContext]>;
+}
+declare function $$render<T extends TreeNode>(): {
+    props: TreeNodeContextProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 NodeContext: $$IsomorphicComponent;
+type NodeContext<T extends TreeNode> = InstanceType<typeof NodeContext<T>>;
+export default NodeContext;

package/dist/components/tree/components/NodeProvider.d.svelte.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { TreeNode } from '../../collection/index.js';
+export interface TreeNodeProviderBaseProps<T extends TreeNode> {
+    node: T;
+    indexPath: number[];
+}
+export interface TreeNodeProviderProps<T extends TreeNode> extends TreeNodeProviderBaseProps<T> {
+    children?: Snippet;
+}
+declare function $$render<T extends TreeNode>(): {
+    props: TreeNodeProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 NodeProvider: $$IsomorphicComponent;
+type NodeProvider<T extends TreeNode> = InstanceType<typeof NodeProvider<T>>;
+export default NodeProvider;

package/dist/components/tree/components/NodeProvider.svelte

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

package/dist/components/tree/components/NodeProvider.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { TreeNode } from '../../collection/index.js';
+export interface TreeNodeProviderBaseProps<T extends TreeNode> {
+    node: T;
+    indexPath: number[];
+}
+export interface TreeNodeProviderProps<T extends TreeNode> extends TreeNodeProviderBaseProps<T> {
+    children?: Snippet;
+}
+declare function $$render<T extends TreeNode>(): {
+    props: TreeNodeProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 NodeProvider: $$IsomorphicComponent;
+type NodeProvider<T extends TreeNode> = InstanceType<typeof NodeProvider<T>>;
+export default NodeProvider;

package/dist/components/tree/components/Root.d.svelte.ts

@@ -0,0 +1,32 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../../types.js';
+import type { TreeNode } from '../../collection/index.js';
+import type { UseTreeProps } from '../hooks/use-tree.svelte.js';
+export interface TreeRootBaseProps<T extends TreeNode> extends Optional<UseTreeProps<T>, 'id'>, RenderStrategyProps, PolymorphicProps<'div'> {
+}
+export interface TreeRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeRootBaseProps<T>> {
+}
+import { type RenderStrategyProps } from '../../../utils/render-strategy.js';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeRootProps<T>;
+    exports: {};
+    bindings: "focusedValue" | "expandedValue" | "selectedValue";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 Root: $$IsomorphicComponent;
+type Root<T extends TreeNode> = InstanceType<typeof Root<T>>;
+export default Root;

package/dist/components/tree/components/Root.svelte

@@ -0,0 +1,65 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../../types'
+  import type { TreeNode } from '../../collection'
+  import type { UseTreeProps } from '../hooks/use-tree.svelte'
+
+  export interface TreeRootBaseProps<T extends TreeNode>
+    extends Optional<UseTreeProps<T>, 'id'>,
+      RenderStrategyProps,
+      PolymorphicProps<'div'> {}
+
+  export interface TreeRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeRootBaseProps<T>> {}
+</script>
+
+<script lang="ts" generics="T extends TreeNode">
+  import {
+    RenderStrategyPropsProvider,
+    splitRenderStrategyProps,
+    type RenderStrategyProps,
+  } from '../../../utils/render-strategy'
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { splitTreeProps } from '../hooks/tree-split-props'
+  import { TreeProvider } from '../hooks/use-tree-context'
+  import { useTree } from '../hooks/use-tree.svelte'
+
+  let {
+    expandedValue = $bindable<string[]>(),
+    selectedValue = $bindable<string[]>(),
+    focusedValue = $bindable<string | null>(),
+    ...props
+  }: TreeRootProps<T> = $props()
+
+  const [renderStrategyProps, treeProps] = $derived(splitRenderStrategyProps(props))
+  const [useTreeProps, localProps] = $derived(splitTreeProps(treeProps))
+
+  const id = $props.id()
+
+  const machineProps = $derived.by<UseTreeProps<T>>(() => ({
+    ...useTreeProps,
+    id: useTreeProps.id ?? id,
+    selectedValue,
+    expandedValue,
+    focusedValue,
+    onExpandedChange: (details) => {
+      useTreeProps.onExpandedChange?.(details)
+      expandedValue = details.expandedValue
+    },
+    onFocusChange: (details) => {
+      useTreeProps.onFocusChange?.(details)
+      focusedValue = details.focusedValue
+    },
+    onSelectionChange: (details) => {
+      useTreeProps.onSelectionChange?.(details)
+      selectedValue = details.selectedValue
+    },
+  }))
+
+  const tree = useTree(() => machineProps)
+  const mergedProps = $derived(mergeProps(tree().getRootProps(), localProps))
+
+  TreeProvider(() => tree())
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+</script>
+
+<UI as="div" {...mergedProps} />

package/dist/components/tree/components/Root.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../../types.js';
+import type { TreeNode } from '../../collection/index.js';
+import type { UseTreeProps } from '../hooks/use-tree.svelte.js';
+export interface TreeRootBaseProps<T extends TreeNode> extends Optional<UseTreeProps<T>, 'id'>, RenderStrategyProps, PolymorphicProps<'div'> {
+}
+export interface TreeRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeRootBaseProps<T>> {
+}
+import { type RenderStrategyProps } from '../../../utils/render-strategy.js';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeRootProps<T>;
+    exports: {};
+    bindings: "focusedValue" | "expandedValue" | "selectedValue";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 Root: $$IsomorphicComponent;
+type Root<T extends TreeNode> = InstanceType<typeof Root<T>>;
+export default Root;

package/dist/components/tree/components/RootProvider.d.svelte.ts

@@ -0,0 +1,33 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+import type { TreeNode } from '../../collection/index.js';
+import type { UseTreeReturn } from '../hooks/use-tree.svelte.js';
+export interface TreeRootProviderBaseProps<T extends TreeNode> extends RenderStrategyProps, PolymorphicProps<'div'> {
+    value: UseTreeReturn<T>;
+}
+export interface TreeRootProviderProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeRootProviderBaseProps<T>> {
+}
+import { type RenderStrategyProps } from '../../../utils/render-strategy.js';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeRootProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 RootProvider: $$IsomorphicComponent;
+type RootProvider<T extends TreeNode> = InstanceType<typeof RootProvider<T>>;
+export default RootProvider;

package/dist/components/tree/components/RootProvider.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+  import type { TreeNode } from '../../collection'
+  import type { UseTreeReturn } from '../hooks/use-tree.svelte'
+
+  export interface TreeRootProviderBaseProps<T extends TreeNode>
+    extends RenderStrategyProps,
+      PolymorphicProps<'div'> {
+    value: UseTreeReturn<T>
+  }
+  export interface TreeRootProviderProps<T extends TreeNode>
+    extends Assign<HTMLProps<'div'>, TreeRootProviderBaseProps<T>> {}
+</script>
+
+<script lang="ts" generics="T extends TreeNode">
+  import {
+    RenderStrategyPropsProvider,
+    splitRenderStrategyProps,
+    type RenderStrategyProps,
+  } from '../../../utils/render-strategy'
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { TreeProvider } from '../hooks/use-tree-context'
+
+  const { value, ...props }: TreeRootProviderProps<T> = $props()
+
+  const [renderStrategyProps, treeProps] = $derived(splitRenderStrategyProps(props))
+  const mergedProps = $derived(mergeProps(value().getRootProps(), treeProps))
+
+  TreeProvider(() => value())
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+</script>
+
+<UI as="div" {...mergedProps} />

package/dist/components/tree/components/RootProvider.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+import type { TreeNode } from '../../collection/index.js';
+import type { UseTreeReturn } from '../hooks/use-tree.svelte.js';
+export interface TreeRootProviderBaseProps<T extends TreeNode> extends RenderStrategyProps, PolymorphicProps<'div'> {
+    value: UseTreeReturn<T>;
+}
+export interface TreeRootProviderProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeRootProviderBaseProps<T>> {
+}
+import { type RenderStrategyProps } from '../../../utils/render-strategy.js';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeRootProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['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 RootProvider: $$IsomorphicComponent;
+type RootProvider<T extends TreeNode> = InstanceType<typeof RootProvider<T>>;
+export default RootProvider;

package/dist/components/tree/components/Tree.d.svelte.ts

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

package/dist/components/tree/components/Tree.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+
+  export interface TreeTreeBaseProps extends PolymorphicProps<'ul'> {}
+  export interface TreeTreeProps extends Assign<HTMLProps<'ul'>, TreeTreeBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { useTreeContext } from '../hooks/use-tree-context'
+
+  const props: TreeTreeProps = $props()
+
+  const tree = useTreeContext()
+  const mergedProps = $derived(mergeProps(tree().getTreeProps(), props))
+</script>
+
+<UI as="div" {...mergedProps} />

package/dist/components/tree/components/Tree.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { Optional } from '../../../types.js';
+import type { TreeNode } from '../../collection/index.js';
+import type { UseTreeProps } from './use-tree.svelte.js';
+type TreeRootMachineProps = Optional<UseTreeProps<TreeNode>, 'id'>;
+export declare function splitTreeProps<T extends TreeRootMachineProps>(props: T): [TreeRootMachineProps, Omit<T, "id" | "ids" | "focusedValue" | "onFocusChange" | "selectionMode" | "collection" | "typeahead" | "expandedValue" | "selectedValue" | "onExpandedChange" | "onSelectionChange" | "expandOnClick" | "defaultSelectedValue" | "defaultExpandedValue">];
+export {};

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

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

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

@@ -0,0 +1,5 @@
+import type { TreeNode } from '../../collection/index.js';
+import type { UseTreeReturn } from './use-tree.svelte.js';
+export interface UseTreeContext<T extends TreeNode> extends UseTreeReturn<T> {
+}
+export declare const TreeProvider: (value: UseTreeContext<any>) => void, useTreeContext: import("../../../utils/create-context.js").RequiredContextConsumer<UseTreeContext<any>>;

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

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

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

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../../types.js';
+import type { NodeState } from '@destyler/tree';
+export interface UseTreeNodeContext extends Accessor<NodeState> {
+}
+export declare const TreeNodeProvider: (value: UseTreeNodeContext) => void, useTreeNodeContext: import("../../../utils/create-context.js").RequiredContextConsumer<UseTreeNodeContext>;

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

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

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

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../../types.js';
+import type { NodeProps } from '@destyler/tree';
+export interface UseTreeNodePropsContext extends Accessor<NodeProps> {
+}
+export declare const TreeNodePropsProvider: (value: UseTreeNodePropsContext) => void, useTreeNodePropsContext: import("../../../utils/create-context.js").RequiredContextConsumer<UseTreeNodePropsContext>;

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

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

package/dist/components/tree/hooks/use-tree.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Accessor } from '../../../types.js';
+import type { PropTypes } from '@destyler/svelte';
+import type { MaybeFunction } from '@destyler/utils';
+import type { TreeCollection, TreeNode } from '../../collection/index.js';
+import * as tree from '@destyler/tree';
+export interface UseTreeProps<T extends TreeNode> extends Omit<tree.Context, 'dir' | 'getRootNode' | 'collection' | 'id'> {
+    /**
+     * A stable id for the tree.
+     *
+     * Svelte hooks cannot call `$props.id()`. Components should pass the id
+     * generated at the component's top level; `Tree.Root` does this
+     * automatically.
+     */
+    id: string;
+    defaultSelectedValue?: tree.Context['selectedValue'];
+    defaultExpandedValue?: tree.Context['expandedValue'];
+    collection: TreeCollection<T>;
+}
+export interface UseTreeReturn<T extends TreeNode> extends Accessor<tree.Api<PropTypes, T>> {
+}
+export declare function useTree<T extends TreeNode>(props: MaybeFunction<UseTreeProps<T>>): UseTreeReturn<T>;

package/dist/components/tree/hooks/use-tree.svelte.js

@@ -0,0 +1,26 @@
+import { useMachine } from '../../../hooks/use-destyler-machine.svelte.js';
+import { useEnvironmentContext } from '../../../providers/environment/index.js';
+import { useLocaleContext } from '../../../providers/locale/index.js';
+import { createMachineProps } from '../../../utils/create-machine-props.js';
+import { normalizeProps } from '../../../utils/normalize-props.js';
+import * as tree from '@destyler/tree';
+import { runIfFn } from '@destyler/utils';
+export function useTree(props) {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return createMachineProps({
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        }, { selectedValue: 'defaultSelectedValue', expandedValue: 'defaultExpandedValue' });
+    });
+    const [state, send] = useMachine(() => tree.machine(machineProps.initial), {
+        get context() {
+            return machineProps.context;
+        },
+    });
+    const api = $derived(tree.connect(state, send, normalizeProps));
+    return () => api;
+}