@ark-ui/svelte 5.2.0 → 5.3.1

package/dist/components/collection/index.d.ts

@@ -2,3 +2,4 @@ export { createGridCollection, type GridCollection, type GridCollectionOptions }
 export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
 export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn, } from './use-list-collection.svelte';
+export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection.svelte';

package/dist/components/collection/index.js

@@ -2,3 +2,4 @@ export { createGridCollection } from './grid-collection';
 export { createListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, } from './tree-collection';
 export { useListCollection, } from './use-list-collection.svelte';
+export { useListSelection } from './use-list-selection.svelte';

package/dist/components/collection/use-list-selection.svelte.d.ts

@@ -0,0 +1,92 @@
+import { type SelectionMode } from '@zag-js/collection';
+import { type MaybeFunction } from '@zag-js/utils';
+import type { CollectionItem, ListCollection } from './list-collection';
+export interface UseListSelectionProps<T extends CollectionItem> {
+    /**
+     * The selection mode.
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Whether the selection is deselectable.
+     */
+    deselectable?: boolean;
+    /**
+     * The initial selected values.
+     */
+    initialSelectedValues?: string[];
+    /**
+     * Whether to reset the selection when the collection changes.
+     */
+    resetOnCollectionChange?: boolean;
+    /**
+     * The collection to use.
+     */
+    collection: ListCollection<T>;
+}
+export declare function useListSelection<T extends CollectionItem>(props: MaybeFunction<UseListSelectionProps<T>>): UseListSelectionReturn;
+export interface UseListSelectionReturn {
+    /**
+     * The selected values as an array.
+     */
+    selectedValues: () => string[];
+    /**
+     * Whether the selection is empty.
+     */
+    isEmpty: () => boolean;
+    /**
+     * The first selected value.
+     */
+    firstSelectedValue: () => string | null;
+    /**
+     * The last selected value.
+     */
+    lastSelectedValue: () => string | null;
+    /**
+     * Check if a value is selected.
+     */
+    isSelected: (value: string | null) => boolean;
+    /**
+     * Check if a value can be selected.
+     */
+    canSelect: (value: string) => boolean;
+    /**
+     * Select a value.
+     */
+    select: (value: string, forceToggle?: boolean) => void;
+    /**
+     * Deselect a value.
+     */
+    deselect: (value: string) => void;
+    /**
+     * Toggle selection of a value.
+     */
+    toggle: (value: string) => void;
+    /**
+     * Replace the selection with a single value.
+     */
+    replace: (value: string | null) => void;
+    /**
+     * Extend the selection from anchor to target.
+     */
+    extend: (anchorValue: string, targetValue: string) => void;
+    /**
+     * Set the selected values.
+     */
+    setSelectedValues: (values: string[]) => void;
+    /**
+     * Clear the selection.
+     */
+    clear: () => void;
+    /**
+     * Clear all selections.
+     */
+    resetSelection: () => void;
+    /**
+     * Returns true if all items from the collection are selected.
+     */
+    isAllSelected: () => boolean;
+    /**
+     * Returns true if at least one item from the collection is selected.
+     */
+    isSomeSelected: () => boolean;
+}

package/dist/components/collection/use-list-selection.svelte.js

@@ -0,0 +1,80 @@
+import { Selection } from '@zag-js/collection';
+import { runIfFn } from '@zag-js/utils';
+import { untrack } from 'svelte';
+export function useListSelection(props) {
+    const localProps = $derived.by(() => {
+        const { collection, selectionMode = 'single', deselectable = true, initialSelectedValues = [], resetOnCollectionChange = false, } = runIfFn(props);
+        return {
+            collection,
+            selectionMode,
+            deselectable,
+            initialSelectedValues,
+            resetOnCollectionChange,
+        };
+    });
+    const createSelection = (values = []) => {
+        const selection = new Selection(values);
+        selection.selectionMode = localProps.selectionMode;
+        selection.deselectable = localProps.deselectable;
+        return selection;
+    };
+    const initialSelectedValues = untrack(() => localProps.initialSelectedValues);
+    let selection = $state(createSelection(initialSelectedValues));
+    // Watch for collection changes and reset selection if needed
+    $effect(() => {
+        const { collection, resetOnCollectionChange } = localProps;
+        // Trigger effect when collection values change
+        collection.getValues();
+        if (resetOnCollectionChange) {
+            selection = createSelection();
+        }
+    });
+    const selectedValues = $derived(Array.from(selection));
+    const isEmpty = $derived(selection.isEmpty());
+    const firstSelectedValue = $derived(selection.firstSelectedValue(localProps.collection));
+    const lastSelectedValue = $derived(selection.lastSelectedValue(localProps.collection));
+    return {
+        selectedValues: () => selectedValues,
+        isEmpty: () => isEmpty,
+        firstSelectedValue: () => firstSelectedValue,
+        lastSelectedValue: () => lastSelectedValue,
+        isSelected: (value) => {
+            return selection.isSelected(value);
+        },
+        isAllSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+        },
+        isSomeSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.some((value) => selection.isSelected(value));
+        },
+        canSelect: (value) => {
+            return selection.canSelect(localProps.collection, value);
+        },
+        select: (value, forceToggle) => {
+            selection = selection.select(localProps.collection, value, forceToggle);
+        },
+        deselect: (value) => {
+            selection = selection.deselect(value);
+        },
+        toggle: (value) => {
+            selection = selection.toggleSelection(localProps.collection, value);
+        },
+        replace: (value) => {
+            selection = selection.replaceSelection(localProps.collection, value);
+        },
+        extend: (anchorValue, targetValue) => {
+            selection = selection.extendSelection(localProps.collection, anchorValue, targetValue);
+        },
+        setSelectedValues: (values) => {
+            selection = selection.setSelection(values);
+        },
+        clear: () => {
+            selection = selection.clearSelection();
+        },
+        resetSelection: () => {
+            selection = createSelection();
+        },
+    };
+}

package/dist/components/combobox/combobox-context.svelte.d.ts

@@ -4,10 +4,17 @@ import type { UseComboboxContext } from './use-combobox-context';
 export interface ComboboxContextProps<T extends CollectionItem> {
     render: Snippet<[UseComboboxContext<T>]>;
 }
+declare function $$render<T extends CollectionItem>(): {
+    props: ComboboxContextProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ComboboxContextProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/components/combobox/combobox-root-provider.svelte.d.ts

@@ -11,10 +11,17 @@ export interface ComboboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ComboboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {
 }
+declare function $$render<T extends CollectionItem>(): {
+    props: ComboboxRootProviderProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ComboboxRootProviderProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

package/dist/components/combobox/combobox-root.svelte.d.ts

@@ -6,10 +6,17 @@ export interface ComboboxRootBaseProps<T extends CollectionItem> extends UseComb
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {
 }
+declare function $$render<T extends CollectionItem>(): {
+    props: ComboboxRootProps<T>;
+    exports: {};
+    bindings: "ref" | "value" | "open" | "inputValue";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ComboboxRootProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref" | "value" | "open" | "inputValue";
     exports(): {};
 }

package/dist/components/factory/factory.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLProps, PolymorphicProps } from '../../types';
 import type { SvelteHTMLElements } from 'svelte/elements';
-declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
-    props(): HTMLProps<T> & PolymorphicProps<T> & {
+declare function $$render<T extends keyof SvelteHTMLElements>(): {
+    props: HTMLProps<T> & PolymorphicProps<T> & {
         /**
          * The HTML tag of the component.
          */
@@ -11,8 +11,15 @@ declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
          */
         ref?: Element | null;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

package/dist/components/factory/svg-factory.svelte.d.ts

@@ -1,12 +1,19 @@
 import type { HTMLProps, PolymorphicProps } from '../../types';
 import type { SvelteHTMLElements } from 'svelte/elements';
-declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
-    props(): HTMLProps<T> & PolymorphicProps<T> & {
+declare function $$render<T extends keyof SvelteHTMLElements>(): {
+    props: HTMLProps<T> & PolymorphicProps<T> & {
         as: T;
         ref?: Element | null;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

package/dist/components/file-upload/file-upload-root.svelte

@@ -13,14 +13,16 @@
   import { FileUploadProvider } from './use-file-upload-context'
   import { useFileUpload } from './use-file-upload.svelte'
 
-  let { ref = $bindable(null), ...props }: FileUploadRootProps = $props()
+  let { ref = $bindable(null), acceptedFiles = $bindable(), ...props }: FileUploadRootProps = $props()
   const providedId = $props.id()
 
   const [useFileUploadProps, localProps] = $derived(
     createSplitProps<UseFileUploadProps>()(props, [
       'accept',
+      'acceptedFiles',
       'allowDrop',
       'capture',
+      'defaultAcceptedFiles',
       'directory',
       'disabled',
       'id',
@@ -45,6 +47,11 @@
   const resolvedProps = $derived<UseFileUploadProps>({
     ...useFileUploadProps,
     id: useFileUploadProps.id ?? providedId,
+    acceptedFiles,
+    onFileChange: (details) => {
+      useFileUploadProps.onFileChange?.(details)
+      if (acceptedFiles !== undefined) acceptedFiles = details.acceptedFiles
+    },
   })
 
   const fileUpload = useFileUpload(() => resolvedProps)

package/dist/components/file-upload/file-upload-root.svelte.d.ts

@@ -4,6 +4,6 @@ export interface FileUploadRootBaseProps extends UseFileUploadProps, Polymorphic
 }
 export interface FileUploadRootProps extends Assign<HTMLProps<'div'>, FileUploadRootBaseProps> {
 }
-declare const FileUploadRoot: import("svelte").Component<FileUploadRootProps, {}, "ref">;
+declare const FileUploadRoot: import("svelte").Component<FileUploadRootProps, {}, "ref" | "acceptedFiles">;
 type FileUploadRoot = ReturnType<typeof FileUploadRoot>;
 export default FileUploadRoot;

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export * from './format';
 export * from './frame';
 export * from './highlight';
 export * from './hover-card';
+export * from './json-tree-view';
 export * from './listbox';
 export * from './menu';
 export * from './number-input';

package/dist/components/index.js

@@ -23,6 +23,7 @@ export * from './format';
 export * from './frame';
 export * from './highlight';
 export * from './hover-card';
+export * from './json-tree-view';
 export * from './listbox';
 export * from './menu';
 export * from './number-input';

package/dist/components/json-tree-view/get-branch-value.d.ts

@@ -0,0 +1,3 @@
+import type { TreeCollection } from '@zag-js/collection';
+import type { JsonNode } from '@zag-js/json-tree-utils';
+export declare function getBranchValues(tree: TreeCollection<JsonNode>, depth: number): string[];

package/dist/components/json-tree-view/get-branch-value.js

@@ -0,0 +1,13 @@
+export function getBranchValues(tree, depth) {
+    let values = [];
+    tree.visit({
+        onEnter: (node, indexPath) => {
+            if (indexPath.length === 0)
+                return;
+            if (tree.isBranchNode(node) && indexPath.length <= depth) {
+                values.push(tree.getNodeValue(node));
+            }
+        },
+    });
+    return values;
+}

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

@@ -0,0 +1,5 @@
+export { default as JsonTreeViewRoot, type JsonTreeViewRootBaseProps, type JsonTreeViewRootProps, } from './json-tree-view-root.svelte';
+export { default as JsonTreeViewRootProvider, type JsonTreeViewRootProviderProps, } from './json-tree-view-root-provider.svelte';
+export { default as JsonTreeViewTree, type JsonTreeViewTreeBaseProps, type JsonTreeViewTreeProps, } from './json-tree-view-tree.svelte';
+export { useJsonTreeView, type UseJsonTreeViewProps, type UseJsonTreeViewReturn } from './use-json-tree-view.svelte';
+export * as JsonTreeView from './json-tree-view';

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

@@ -0,0 +1,5 @@
+export { default as JsonTreeViewRoot, } from './json-tree-view-root.svelte';
+export { default as JsonTreeViewRootProvider, } from './json-tree-view-root-provider.svelte';
+export { default as JsonTreeViewTree, } from './json-tree-view-tree.svelte';
+export { useJsonTreeView } from './use-json-tree-view.svelte';
+export * as JsonTreeView from './json-tree-view';

package/dist/components/json-tree-view/json-tree-view-key-node.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { type JsonNode, keyPathToKey } from '@zag-js/json-tree-utils'
+
+  interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean
+  }
+
+  let { node, showQuotes }: JsonTreeViewKeyNodeProps = $props()
+
+  const key = $derived(keyPathToKey(node.keyPath))
+</script>
+
+<span data-kind="key" data-non-enumerable={node.isNonEnumerable ? '' : undefined}>
+  {showQuotes ? `"${key}"` : key}
+</span>
+<span data-kind="colon">:</span>

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

@@ -0,0 +1,14 @@
+import { type JsonNode } from '@zag-js/json-tree-utils';
+interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode;
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean;
+}
+declare const JsonTreeViewKeyNode: import("svelte").Component<JsonTreeViewKeyNodeProps, {}, "">;
+type JsonTreeViewKeyNode = ReturnType<typeof JsonTreeViewKeyNode>;
+export default JsonTreeViewKeyNode;

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import {
+    type JsonNode,
+    type JsonNodeHastElement,
+    getAccessibleDescription,
+    jsonNodeToElement,
+    keyPathToKey,
+  } from '@zag-js/json-tree-utils'
+  import type { Snippet } from 'svelte'
+  import { TreeView, useTreeViewContext } from '../tree-view'
+  import JsonTreeViewKeyNode from './json-tree-view-key-node.svelte'
+  import JsonTreeViewNode from './json-tree-view-node.svelte'
+  import { useJsonTreeViewPropsContext } from './json-tree-view-props-context'
+  import JsonTreeViewValueNode from './json-tree-view-value-node.svelte'
+
+  export interface JsonTreeViewNodeBaseProps {
+    /**
+     * The icon to use for the arrow.
+     */
+    arrow?: Snippet<[]>
+    /**
+     * The indent guide to use for the tree.
+     */
+    indentGuide?: boolean | Snippet<[]>
+    /**
+     * The function to render the value of the node.
+     */
+    renderValue?: Snippet<[JsonNodeHastElement]>
+  }
+
+  export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode
+    indexPath: number[]
+  }
+
+  const props: JsonTreeViewNodeProps = $props()
+
+  const { node, indexPath, arrow, indentGuide, renderValue } = props
+
+  const options = useJsonTreeViewPropsContext()
+
+  const tree = useTreeViewContext()
+  const nodeState = $derived(tree().getNodeState({ node, indexPath }))
+
+  const key = $derived(keyPathToKey(node.keyPath, { excludeRoot: true }))
+  const valueNode = $derived(jsonNodeToElement(node, options()))
+
+  const nodeProps = $derived.by(() => {
+    const desc = getAccessibleDescription(node)
+    const line = indexPath.reduce((acc, curr) => acc + curr, 1)
+    const lineLength = indexPath.length - 1
+
+    return {
+      'aria-label': desc,
+      'data-line': line,
+      style: `--line-length: ${lineLength}`,
+    }
+  })
+
+  const scopeProps = {
+    'data-scope': 'json-tree-view',
+  }
+</script>
+
+<TreeView.NodeProvider {node} {indexPath}>
+  {#if nodeState.isBranch}
+    <TreeView.Branch {...scopeProps}>
+      <TreeView.BranchControl {...nodeProps} {...scopeProps}>
+        {#if arrow}
+          <TreeView.BranchIndicator {...scopeProps}>
+            {@render arrow()}
+          </TreeView.BranchIndicator>
+        {/if}
+        <TreeView.BranchText {...scopeProps}>
+          {#if key}
+            <JsonTreeViewKeyNode {node} showQuotes={options().quotesOnKeys} />
+          {/if}
+          <JsonTreeViewValueNode node={valueNode} {renderValue} />
+        </TreeView.BranchText>
+      </TreeView.BranchControl>
+      <TreeView.BranchContent {...scopeProps}>
+        {#if typeof indentGuide === 'boolean'}
+          <TreeView.BranchIndentGuide />
+        {:else if indentGuide}
+          {@render indentGuide()}
+        {/if}
+        {#each node.children ?? [] as child, index (index)}
+          <JsonTreeViewNode {...props} node={child} indexPath={[...indexPath, index]} />
+        {/each}
+      </TreeView.BranchContent>
+    </TreeView.Branch>
+  {:else}
+    <TreeView.Item {...nodeProps} {...scopeProps}>
+      <TreeView.ItemText {...scopeProps}>
+        {#if key}
+          <JsonTreeViewKeyNode {node} showQuotes={options().quotesOnKeys} />
+        {/if}
+        <JsonTreeViewValueNode node={valueNode} {renderValue} />
+      </TreeView.ItemText>
+    </TreeView.Item>
+  {/if}
+</TreeView.NodeProvider>

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

@@ -0,0 +1,24 @@
+import { type JsonNode, type JsonNodeHastElement } from '@zag-js/json-tree-utils';
+import type { Snippet } from 'svelte';
+import JsonTreeViewNode from './json-tree-view-node.svelte';
+export interface JsonTreeViewNodeBaseProps {
+    /**
+     * The icon to use for the arrow.
+     */
+    arrow?: Snippet<[]>;
+    /**
+     * The indent guide to use for the tree.
+     */
+    indentGuide?: boolean | Snippet<[]>;
+    /**
+     * The function to render the value of the node.
+     */
+    renderValue?: Snippet<[JsonNodeHastElement]>;
+}
+export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode;
+    indexPath: number[];
+}
+declare const JsonTreeViewNode: import("svelte").Component<JsonTreeViewNodeProps, {}, "">;
+type JsonTreeViewNode = ReturnType<typeof JsonTreeViewNode>;
+export default JsonTreeViewNode;

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

@@ -0,0 +1,8 @@
+import type { JsonNodePreviewOptions } from '@zag-js/json-tree-utils';
+export interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+    /**
+     * Whether to show quotes on the keys.
+     */
+    quotesOnKeys?: boolean;
+}
+export declare const JsonTreeViewPropsProvider: (opts: () => JsonTreeViewOptions) => void, useJsonTreeViewPropsContext: (fallback?: (() => JsonTreeViewOptions) | undefined) => () => JsonTreeViewOptions;

package/dist/components/json-tree-view/json-tree-view-props-context.js

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

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { JsonNode } from '@zag-js/json-tree-utils'
+  import { TreeViewRootProvider, type TreeViewRootProviderProps } from '../tree-view'
+
+  export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
+
+  const props: JsonTreeViewRootProviderProps = $props()
+</script>
+
+<TreeViewRootProvider data-scope="json-tree-view" {...props}>
+  {@render props.children?.()}
+</TreeViewRootProvider>

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

@@ -0,0 +1,7 @@
+import type { JsonNode } from '@zag-js/json-tree-utils';
+import { type TreeViewRootProviderProps } from '../tree-view';
+export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {
+}
+declare const JsonTreeViewRootProvider: import("svelte").Component<JsonTreeViewRootProviderProps, {}, "">;
+type JsonTreeViewRootProvider = ReturnType<typeof JsonTreeViewRootProvider>;
+export default JsonTreeViewRootProvider;

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { type JsonNode, getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { TreeView, createTreeCollection, type TreeViewRootProps } from '../tree-view'
+  import { getBranchValues } from './get-branch-value'
+  import { type JsonTreeViewOptions, JsonTreeViewPropsProvider } from './json-tree-view-props-context'
+
+  export interface JsonTreeViewRootBaseProps extends JsonTreeViewOptions {
+    /**
+     * The data to display in the tree.
+     */
+    data: unknown
+    /**
+     * The default expand level.
+     */
+    defaultExpandedDepth?: number
+  }
+
+  export interface JsonTreeViewRootProps
+    extends Omit<TreeViewRootProps<JsonNode>, 'collection'>,
+      JsonTreeViewRootBaseProps {}
+
+  const { data, defaultExpandedDepth, ...props }: JsonTreeViewRootProps = $props()
+
+  const splitJsonTreeViewProps = createSplitProps<JsonTreeViewOptions>()
+
+  const [jsonTreeProps, localProps] = $derived(
+    splitJsonTreeViewProps(props, [
+      'maxPreviewItems',
+      'collapseStringsAfterLength',
+      'quotesOnKeys',
+      'groupArraysAfterLength',
+      'showNonenumerable',
+    ]),
+  )
+
+  const collection = $derived(
+    createTreeCollection<JsonNode>({
+      nodeToValue,
+      nodeToString,
+      rootNode: getRootNode(data),
+    }),
+  )
+
+  const defaultExpandedValue = $derived(
+    defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : undefined,
+  )
+
+  JsonTreeViewPropsProvider(() => jsonTreeProps)
+</script>
+
+<TreeView.Root data-scope="json-tree-view" {collection} {defaultExpandedValue} {...localProps}>
+  {@render props.children?.()}
+</TreeView.Root>