@ark-ui/react 5.17.0 → 5.18.1

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

@@ -0,0 +1,62 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const jsonTreeUtils = require('@zag-js/json-tree-utils');
+const react = require('react');
+const treeViewBranch = require('../tree-view/tree-view-branch.cjs');
+const treeViewBranchContent = require('../tree-view/tree-view-branch-content.cjs');
+const treeViewBranchControl = require('../tree-view/tree-view-branch-control.cjs');
+const treeViewBranchIndentGuide = require('../tree-view/tree-view-branch-indent-guide.cjs');
+const treeViewBranchIndicator = require('../tree-view/tree-view-branch-indicator.cjs');
+const treeViewBranchText = require('../tree-view/tree-view-branch-text.cjs');
+const treeViewItem = require('../tree-view/tree-view-item.cjs');
+const treeViewItemText = require('../tree-view/tree-view-item-text.cjs');
+const treeViewNodeProvider = require('../tree-view/tree-view-node-provider.cjs');
+const useTreeViewContext = require('../tree-view/use-tree-view-context.cjs');
+const jsonTreeViewKeyNode = require('./json-tree-view-key-node.cjs');
+const jsonTreeViewPropsContext = require('./json-tree-view-props-context.cjs');
+const jsonTreeViewValueNode = require('./json-tree-view-value-node.cjs');
+
+const scopeProps = {
+  "data-scope": "json-tree-view"
+};
+function JsonTreeViewNode(props) {
+  const { node, indexPath, arrow, indentGuide, renderValue } = props;
+  const options = jsonTreeViewPropsContext.useJsonTreeViewPropsContext();
+  const tree = useTreeViewContext.useTreeViewContext();
+  const nodeState = tree.getNodeState({ node, indexPath });
+  const key = jsonTreeUtils.keyPathToKey(node.keyPath, { excludeRoot: true });
+  const valueNode = react.useMemo(() => jsonTreeUtils.jsonNodeToElement(node, options), [node, options]);
+  const nodeProps = react.useMemo(() => {
+    const desc = jsonTreeUtils.getAccessibleDescription(node);
+    const line = indexPath.reduce((acc, curr) => acc + curr, 1);
+    const lineLength = indexPath.length - 1;
+    return {
+      ...scopeProps,
+      "aria-label": desc,
+      "data-line": line,
+      style: { ["--line-length"]: lineLength }
+    };
+  }, [indexPath, node]);
+  return /* @__PURE__ */ jsxRuntime.jsx(treeViewNodeProvider.TreeViewNodeProvider, { node, indexPath, children: nodeState.isBranch ? /* @__PURE__ */ jsxRuntime.jsxs(treeViewBranch.TreeViewBranch, { ...scopeProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(treeViewBranchControl.TreeViewBranchControl, { ...nodeProps, children: [
+      arrow && /* @__PURE__ */ jsxRuntime.jsx(treeViewBranchIndicator.TreeViewBranchIndicator, { ...scopeProps, children: arrow }),
+      /* @__PURE__ */ jsxRuntime.jsxs(treeViewBranchText.TreeViewBranchText, { ...scopeProps, children: [
+        key && /* @__PURE__ */ jsxRuntime.jsx(jsonTreeViewKeyNode.JsonTreeViewKeyNode, { node, showQuotes: options.quotesOnKeys }),
+        /* @__PURE__ */ jsxRuntime.jsx(jsonTreeViewValueNode.JsonTreeViewValueNode, { node: valueNode, renderValue })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(treeViewBranchContent.TreeViewBranchContent, { ...scopeProps, children: [
+      typeof indentGuide === "boolean" ? /* @__PURE__ */ jsxRuntime.jsx(treeViewBranchIndentGuide.TreeViewBranchIndentGuide, {}) : indentGuide,
+      node.children?.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(JsonTreeViewNode, { ...props, node: child, indexPath: [...indexPath, index] }, index))
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(treeViewItem.TreeViewItem, { ...nodeProps, children: /* @__PURE__ */ jsxRuntime.jsxs(treeViewItemText.TreeViewItemText, { ...scopeProps, children: [
+    key && /* @__PURE__ */ jsxRuntime.jsx(jsonTreeViewKeyNode.JsonTreeViewKeyNode, { node, showQuotes: options.quotesOnKeys }),
+    /* @__PURE__ */ jsxRuntime.jsx(jsonTreeViewValueNode.JsonTreeViewValueNode, { node: valueNode, renderValue })
+  ] }) }) });
+}
+
+exports.JsonTreeViewNode = JsonTreeViewNode;

package/dist/components/json-tree-view/json-tree-view-node.d.cts

@@ -0,0 +1,20 @@
+import { JsonNode, JsonNodeHastElement } from '@zag-js/json-tree-utils';
+export interface JsonTreeViewNodeBaseProps {
+    /**
+     * The icon to use for the arrow.
+     */
+    arrow?: React.ReactElement;
+    /**
+     * The indent guide to use for the tree.
+     */
+    indentGuide?: boolean | React.ReactElement;
+    /**
+     * The function to render the value of the node.
+     */
+    renderValue?: (node: JsonNodeHastElement) => React.ReactNode;
+}
+export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode;
+    indexPath: number[];
+}
+export declare function JsonTreeViewNode(props: JsonTreeViewNodeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { JsonNode, JsonNodeHastElement } from '@zag-js/json-tree-utils';
+export interface JsonTreeViewNodeBaseProps {
+    /**
+     * The icon to use for the arrow.
+     */
+    arrow?: React.ReactElement;
+    /**
+     * The indent guide to use for the tree.
+     */
+    indentGuide?: boolean | React.ReactElement;
+    /**
+     * The function to render the value of the node.
+     */
+    renderValue?: (node: JsonNodeHastElement) => React.ReactNode;
+}
+export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode;
+    indexPath: number[];
+}
+export declare function JsonTreeViewNode(props: JsonTreeViewNodeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,58 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { keyPathToKey, jsonNodeToElement, getAccessibleDescription } from '@zag-js/json-tree-utils';
+import { useMemo } from 'react';
+import { TreeViewBranch } from '../tree-view/tree-view-branch.js';
+import { TreeViewBranchContent } from '../tree-view/tree-view-branch-content.js';
+import { TreeViewBranchControl } from '../tree-view/tree-view-branch-control.js';
+import { TreeViewBranchIndentGuide } from '../tree-view/tree-view-branch-indent-guide.js';
+import { TreeViewBranchIndicator } from '../tree-view/tree-view-branch-indicator.js';
+import { TreeViewBranchText } from '../tree-view/tree-view-branch-text.js';
+import { TreeViewItem } from '../tree-view/tree-view-item.js';
+import { TreeViewItemText } from '../tree-view/tree-view-item-text.js';
+import { TreeViewNodeProvider } from '../tree-view/tree-view-node-provider.js';
+import { useTreeViewContext } from '../tree-view/use-tree-view-context.js';
+import { JsonTreeViewKeyNode } from './json-tree-view-key-node.js';
+import { useJsonTreeViewPropsContext } from './json-tree-view-props-context.js';
+import { JsonTreeViewValueNode } from './json-tree-view-value-node.js';
+
+const scopeProps = {
+  "data-scope": "json-tree-view"
+};
+function JsonTreeViewNode(props) {
+  const { node, indexPath, arrow, indentGuide, renderValue } = props;
+  const options = useJsonTreeViewPropsContext();
+  const tree = useTreeViewContext();
+  const nodeState = tree.getNodeState({ node, indexPath });
+  const key = keyPathToKey(node.keyPath, { excludeRoot: true });
+  const valueNode = useMemo(() => jsonNodeToElement(node, options), [node, options]);
+  const nodeProps = useMemo(() => {
+    const desc = getAccessibleDescription(node);
+    const line = indexPath.reduce((acc, curr) => acc + curr, 1);
+    const lineLength = indexPath.length - 1;
+    return {
+      ...scopeProps,
+      "aria-label": desc,
+      "data-line": line,
+      style: { ["--line-length"]: lineLength }
+    };
+  }, [indexPath, node]);
+  return /* @__PURE__ */ jsx(TreeViewNodeProvider, { node, indexPath, children: nodeState.isBranch ? /* @__PURE__ */ jsxs(TreeViewBranch, { ...scopeProps, children: [
+    /* @__PURE__ */ jsxs(TreeViewBranchControl, { ...nodeProps, children: [
+      arrow && /* @__PURE__ */ jsx(TreeViewBranchIndicator, { ...scopeProps, children: arrow }),
+      /* @__PURE__ */ jsxs(TreeViewBranchText, { ...scopeProps, children: [
+        key && /* @__PURE__ */ jsx(JsonTreeViewKeyNode, { node, showQuotes: options.quotesOnKeys }),
+        /* @__PURE__ */ jsx(JsonTreeViewValueNode, { node: valueNode, renderValue })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(TreeViewBranchContent, { ...scopeProps, children: [
+      typeof indentGuide === "boolean" ? /* @__PURE__ */ jsx(TreeViewBranchIndentGuide, {}) : indentGuide,
+      node.children?.map((child, index) => /* @__PURE__ */ jsx(JsonTreeViewNode, { ...props, node: child, indexPath: [...indexPath, index] }, index))
+    ] })
+  ] }) : /* @__PURE__ */ jsx(TreeViewItem, { ...nodeProps, children: /* @__PURE__ */ jsxs(TreeViewItemText, { ...scopeProps, children: [
+    key && /* @__PURE__ */ jsx(JsonTreeViewKeyNode, { node, showQuotes: options.quotesOnKeys }),
+    /* @__PURE__ */ jsx(JsonTreeViewValueNode, { node: valueNode, renderValue })
+  ] }) }) });
+}
+
+export { JsonTreeViewNode };

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

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext.createContext({
+  name: "JsonTreeViewPropsContext",
+  hookName: "useJsonTreeViewPropsContext",
+  providerName: "<JsonTreeViewPropsProvider />"
+});
+
+exports.JsonTreeViewPropsProvider = JsonTreeViewPropsProvider;
+exports.useJsonTreeViewPropsContext = useJsonTreeViewPropsContext;

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const treeViewRootProvider = require('../tree-view/tree-view-root-provider.cjs');
+
+const JsonTreeViewRootProvider = react.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(treeViewRootProvider.TreeViewRootProvider, { "data-scope": "json-tree-view", ...props, ref });
+});
+JsonTreeViewRootProvider.displayName = "JsonTreeViewRootProvider";
+
+exports.JsonTreeViewRootProvider = JsonTreeViewRootProvider;

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

@@ -0,0 +1,6 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { TreeView } from '../tree-view';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface JsonTreeViewRootProviderProps extends TreeView.RootProviderProps<JsonNode> {
+}
+export declare const JsonTreeViewRootProvider: ForwardRefExoticComponent<JsonTreeViewRootProviderProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { TreeView } from '../tree-view';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface JsonTreeViewRootProviderProps extends TreeView.RootProviderProps<JsonNode> {
+}
+export declare const JsonTreeViewRootProvider: ForwardRefExoticComponent<JsonTreeViewRootProviderProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { TreeViewRootProvider } from '../tree-view/tree-view-root-provider.js';
+
+const JsonTreeViewRootProvider = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(TreeViewRootProvider, { "data-scope": "json-tree-view", ...props, ref });
+});
+JsonTreeViewRootProvider.displayName = "JsonTreeViewRootProvider";
+
+export { JsonTreeViewRootProvider };

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

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const jsonTreeUtils = require('@zag-js/json-tree-utils');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const treeCollection = require('../collection/tree-collection.cjs');
+const treeViewRoot = require('../tree-view/tree-view-root.cjs');
+const getBranchValue = require('./get-branch-value.cjs');
+const jsonTreeViewPropsContext = require('./json-tree-view-props-context.cjs');
+
+const splitJsonTreeViewProps = createSplitProps.createSplitProps();
+const JsonTreeViewRoot = react.forwardRef((props, ref) => {
+  const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+    "maxPreviewItems",
+    "collapseStringsAfterLength",
+    "quotesOnKeys",
+    "groupArraysAfterLength",
+    "showNonenumerable"
+  ]);
+  const { data, defaultExpandedDepth, ...restProps } = localProps;
+  const collection = react.useMemo(() => {
+    return treeCollection.createTreeCollection({
+      nodeToValue: jsonTreeUtils.nodeToValue,
+      nodeToString: jsonTreeUtils.nodeToString,
+      rootNode: jsonTreeUtils.getRootNode(data)
+    });
+  }, [data]);
+  const defaultExpandedValue = react.useMemo(() => {
+    return defaultExpandedDepth != null ? getBranchValue.getBranchValues(collection, defaultExpandedDepth) : void 0;
+  }, [collection, defaultExpandedDepth]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsonTreeViewPropsContext.JsonTreeViewPropsProvider, { value: jsonTreeProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    treeViewRoot.TreeViewRoot,
+    {
+      "data-scope": "json-tree-view",
+      collection,
+      defaultExpandedValue,
+      ...restProps,
+      ref
+    }
+  ) });
+});
+JsonTreeViewRoot.displayName = "JsonTreeViewRoot";
+
+exports.JsonTreeViewRoot = JsonTreeViewRoot;

package/dist/components/json-tree-view/json-tree-view-root.d.cts

@@ -0,0 +1,15 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { TreeView } from '../tree-view';
+import { JsonTreeViewOptions } from './json-tree-view-props-context';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface JsonTreeViewRootProps extends Omit<TreeView.RootProps<JsonNode>, 'collection'>, JsonTreeViewOptions {
+    /**
+     * The data to display in the tree.
+     */
+    data: unknown;
+    /**
+     * The default expand level.
+     */
+    defaultExpandedDepth?: number;
+}
+export declare const JsonTreeViewRoot: ForwardRefExoticComponent<JsonTreeViewRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { TreeView } from '../tree-view';
+import { JsonTreeViewOptions } from './json-tree-view-props-context';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface JsonTreeViewRootProps extends Omit<TreeView.RootProps<JsonNode>, 'collection'>, JsonTreeViewOptions {
+    /**
+     * The data to display in the tree.
+     */
+    data: unknown;
+    /**
+     * The default expand level.
+     */
+    defaultExpandedDepth?: number;
+}
+export declare const JsonTreeViewRoot: ForwardRefExoticComponent<JsonTreeViewRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,44 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
+import { forwardRef, useMemo } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { createTreeCollection } from '../collection/tree-collection.js';
+import { TreeViewRoot } from '../tree-view/tree-view-root.js';
+import { getBranchValues } from './get-branch-value.js';
+import { JsonTreeViewPropsProvider } from './json-tree-view-props-context.js';
+
+const splitJsonTreeViewProps = createSplitProps();
+const JsonTreeViewRoot = forwardRef((props, ref) => {
+  const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+    "maxPreviewItems",
+    "collapseStringsAfterLength",
+    "quotesOnKeys",
+    "groupArraysAfterLength",
+    "showNonenumerable"
+  ]);
+  const { data, defaultExpandedDepth, ...restProps } = localProps;
+  const collection = useMemo(() => {
+    return createTreeCollection({
+      nodeToValue,
+      nodeToString,
+      rootNode: getRootNode(data)
+    });
+  }, [data]);
+  const defaultExpandedValue = useMemo(() => {
+    return defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
+  }, [collection, defaultExpandedDepth]);
+  return /* @__PURE__ */ jsx(JsonTreeViewPropsProvider, { value: jsonTreeProps, children: /* @__PURE__ */ jsx(
+    TreeViewRoot,
+    {
+      "data-scope": "json-tree-view",
+      collection,
+      defaultExpandedValue,
+      ...restProps,
+      ref
+    }
+  ) });
+});
+JsonTreeViewRoot.displayName = "JsonTreeViewRoot";
+
+export { JsonTreeViewRoot };

package/dist/components/json-tree-view/json-tree-view-tree.cjs

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const treeViewTree = require('../tree-view/tree-view-tree.cjs');
+const useTreeViewContext = require('../tree-view/use-tree-view-context.cjs');
+const jsonTreeViewNode = require('./json-tree-view-node.cjs');
+
+const splitTreeNodeProps = createSplitProps.createSplitProps();
+const JsonTreeViewTree = react.forwardRef((props, ref) => {
+  const [nodeProps, treeProps] = splitTreeNodeProps(props, ["arrow", "indentGuide", "renderValue"]);
+  const tree = useTreeViewContext.useTreeViewContext();
+  const children = tree.collection.getNodeChildren(tree.collection.rootNode);
+  return /* @__PURE__ */ jsxRuntime.jsx(treeViewTree.TreeViewTree, { "data-scope": "json-tree-view", ...treeProps, ref, children: children.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(jsonTreeViewNode.JsonTreeViewNode, { node: child, indexPath: [index], ...nodeProps }, index)) });
+});
+JsonTreeViewTree.displayName = "JsonTreeViewTree";
+
+exports.JsonTreeViewTree = JsonTreeViewTree;

package/dist/components/json-tree-view/json-tree-view-tree.d.cts

@@ -0,0 +1,6 @@
+import { TreeView } from '../tree-view';
+import { JsonTreeViewNodeBaseProps } from './json-tree-view-node';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface JsonTreeViewTreeProps extends TreeView.TreeProps, JsonTreeViewNodeBaseProps {
+}
+export declare const JsonTreeViewTree: ForwardRefExoticComponent<JsonTreeViewTreeProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+import { TreeView } from '../tree-view';
+import { JsonTreeViewNodeBaseProps } from './json-tree-view-node';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface JsonTreeViewTreeProps extends TreeView.TreeProps, JsonTreeViewNodeBaseProps {
+}
+export declare const JsonTreeViewTree: ForwardRefExoticComponent<JsonTreeViewTreeProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { TreeViewTree } from '../tree-view/tree-view-tree.js';
+import { useTreeViewContext } from '../tree-view/use-tree-view-context.js';
+import { JsonTreeViewNode } from './json-tree-view-node.js';
+
+const splitTreeNodeProps = createSplitProps();
+const JsonTreeViewTree = forwardRef((props, ref) => {
+  const [nodeProps, treeProps] = splitTreeNodeProps(props, ["arrow", "indentGuide", "renderValue"]);
+  const tree = useTreeViewContext();
+  const children = tree.collection.getNodeChildren(tree.collection.rootNode);
+  return /* @__PURE__ */ jsx(TreeViewTree, { "data-scope": "json-tree-view", ...treeProps, ref, children: children.map((child, index) => /* @__PURE__ */ jsx(JsonTreeViewNode, { node: child, indexPath: [index], ...nodeProps }, index)) });
+});
+JsonTreeViewTree.displayName = "JsonTreeViewTree";
+
+export { JsonTreeViewTree };

package/dist/components/json-tree-view/json-tree-view-value-node.cjs

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+
+const JsonTreeViewValueNode = (props) => {
+  const { node, renderValue } = props;
+  if (node.type === "text") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderValue?.(node) ?? node.value });
+  }
+  const Element = node.tagName;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Element,
+    {
+      "data-root": node.properties.root ? "" : void 0,
+      "data-type": node.properties.nodeType,
+      "data-kind": node.properties.kind,
+      suppressHydrationWarning: true,
+      children: node.children.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(JsonTreeViewValueNode, { node: child, renderValue }, index))
+    }
+  );
+};
+
+exports.JsonTreeViewValueNode = JsonTreeViewValueNode;

package/dist/components/json-tree-view/json-tree-view-value-node.d.cts

@@ -0,0 +1,7 @@
+import { JsonNodeHastElement } from '@zag-js/json-tree-utils';
+interface JsonTreeViewValueNodeProps {
+    node: JsonNodeHastElement;
+    renderValue?: (node: JsonNodeHastElement) => React.ReactNode;
+}
+export declare const JsonTreeViewValueNode: (props: JsonTreeViewValueNodeProps) => React.ReactNode;
+export {};

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

@@ -0,0 +1,7 @@
+import { JsonNodeHastElement } from '@zag-js/json-tree-utils';
+interface JsonTreeViewValueNodeProps {
+    node: JsonNodeHastElement;
+    renderValue?: (node: JsonNodeHastElement) => React.ReactNode;
+}
+export declare const JsonTreeViewValueNode: (props: JsonTreeViewValueNodeProps) => React.ReactNode;
+export {};

package/dist/components/json-tree-view/json-tree-view-value-node.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const JsonTreeViewValueNode = (props) => {
+  const { node, renderValue } = props;
+  if (node.type === "text") {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderValue?.(node) ?? node.value });
+  }
+  const Element = node.tagName;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      "data-root": node.properties.root ? "" : void 0,
+      "data-type": node.properties.nodeType,
+      "data-kind": node.properties.kind,
+      suppressHydrationWarning: true,
+      children: node.children.map((child, index) => /* @__PURE__ */ jsx(JsonTreeViewValueNode, { node: child, renderValue }, index))
+    }
+  );
+};
+
+export { JsonTreeViewValueNode };

package/dist/components/json-tree-view/json-tree-view.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsonTreeViewRoot = require('./json-tree-view-root.cjs');
+const jsonTreeViewRootProvider = require('./json-tree-view-root-provider.cjs');
+const jsonTreeViewTree = require('./json-tree-view-tree.cjs');
+
+
+
+exports.Root = jsonTreeViewRoot.JsonTreeViewRoot;
+exports.RootProvider = jsonTreeViewRootProvider.JsonTreeViewRootProvider;
+exports.Tree = jsonTreeViewTree.JsonTreeViewTree;

package/dist/components/json-tree-view/json-tree-view.d.cts

@@ -0,0 +1,3 @@
+export { JsonTreeViewRoot as Root, type JsonTreeViewRootProps as RootProps } from './json-tree-view-root';
+export { JsonTreeViewRootProvider as RootProvider, type JsonTreeViewRootProviderProps as RootProviderProps, } from './json-tree-view-root-provider';
+export { JsonTreeViewTree as Tree, type JsonTreeViewTreeProps as TreeProps } from './json-tree-view-tree';

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

@@ -0,0 +1,3 @@
+export { JsonTreeViewRoot as Root, type JsonTreeViewRootProps as RootProps } from './json-tree-view-root';
+export { JsonTreeViewRootProvider as RootProvider, type JsonTreeViewRootProviderProps as RootProviderProps, } from './json-tree-view-root-provider';
+export { JsonTreeViewTree as Tree, type JsonTreeViewTreeProps as TreeProps } from './json-tree-view-tree';

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

@@ -0,0 +1,3 @@
+export { JsonTreeViewRoot as Root } from './json-tree-view-root.js';
+export { JsonTreeViewRootProvider as RootProvider } from './json-tree-view-root-provider.js';
+export { JsonTreeViewTree as Tree } from './json-tree-view-tree.js';

package/dist/components/json-tree-view/use-json-tree-view.cjs

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsonTreeUtils = require('@zag-js/json-tree-utils');
+const react = require('react');
+const treeCollection = require('../collection/tree-collection.cjs');
+const useTreeView = require('../tree-view/use-tree-view.cjs');
+const getBranchValue = require('./get-branch-value.cjs');
+
+const useJsonTreeView = (props) => {
+  const { data, defaultExpandedDepth = 1, ...restProps } = props;
+  const collection = react.useMemo(() => {
+    return treeCollection.createTreeCollection({
+      nodeToValue: jsonTreeUtils.nodeToValue,
+      nodeToString: jsonTreeUtils.nodeToString,
+      rootNode: jsonTreeUtils.getRootNode(data)
+    });
+  }, [data]);
+  const defaultExpandedValue = react.useMemo(() => {
+    return defaultExpandedDepth != null ? getBranchValue.getBranchValues(collection, defaultExpandedDepth) : void 0;
+  }, [collection, defaultExpandedDepth]);
+  return useTreeView.useTreeView({
+    defaultExpandedValue,
+    ...restProps,
+    collection,
+    typeahead: false
+  });
+};
+
+exports.useJsonTreeView = useJsonTreeView;

package/dist/components/json-tree-view/use-json-tree-view.d.cts

@@ -0,0 +1,9 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { UseTreeViewProps, UseTreeViewReturn } from '../tree-view';
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'> {
+    data: unknown;
+    defaultExpandedDepth?: number;
+}
+export interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {
+}
+export declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseTreeViewReturn<JsonNode<any>>;

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

@@ -0,0 +1,9 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { UseTreeViewProps, UseTreeViewReturn } from '../tree-view';
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'> {
+    data: unknown;
+    defaultExpandedDepth?: number;
+}
+export interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {
+}
+export declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseTreeViewReturn<JsonNode<any>>;

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

@@ -0,0 +1,28 @@
+'use client';
+import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
+import { useMemo } from 'react';
+import { createTreeCollection } from '../collection/tree-collection.js';
+import { useTreeView } from '../tree-view/use-tree-view.js';
+import { getBranchValues } from './get-branch-value.js';
+
+const useJsonTreeView = (props) => {
+  const { data, defaultExpandedDepth = 1, ...restProps } = props;
+  const collection = useMemo(() => {
+    return createTreeCollection({
+      nodeToValue,
+      nodeToString,
+      rootNode: getRootNode(data)
+    });
+  }, [data]);
+  const defaultExpandedValue = useMemo(() => {
+    return defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
+  }, [collection, defaultExpandedDepth]);
+  return useTreeView({
+    defaultExpandedValue,
+    ...restProps,
+    collection,
+    typeahead: false
+  });
+};
+
+export { useJsonTreeView };