@ark-ui/vue 5.17.0 → 5.18.0

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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;
+}
+
+exports.getBranchValues = getBranchValues;

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

@@ -0,0 +1,3 @@
+import { TreeCollection } from '@zag-js/collection';
+import { 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.d.ts

@@ -0,0 +1,3 @@
+import { TreeCollection } from '@zag-js/collection';
+import { 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,14 @@
+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;
+}
+
+export { getBranchValues };

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsonTreeViewRoot_vue_vue_type_script_setup_true_lang = require('./json-tree-view-root.vue.cjs');
+const jsonTreeViewRootProvider_vue_vue_type_script_setup_true_lang = require('./json-tree-view-root-provider.vue.cjs');
+const jsonTreeViewTree_vue_vue_type_script_setup_true_lang = require('./json-tree-view-tree.vue.cjs');
+const useJsonTreeView = require('./use-json-tree-view.cjs');
+const jsonTreeView = require('./json-tree-view.cjs');
+
+
+
+exports.JsonTreeViewRoot = jsonTreeViewRoot_vue_vue_type_script_setup_true_lang.default;
+exports.JsonTreeViewRootProvider = jsonTreeViewRootProvider_vue_vue_type_script_setup_true_lang.default;
+exports.JsonTreeViewTree = jsonTreeViewTree_vue_vue_type_script_setup_true_lang.default;
+exports.useJsonTreeView = useJsonTreeView.useJsonTreeView;
+exports.JsonTreeView = jsonTreeView;

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const jsonTreeUtils = require('@zag-js/json-tree-utils');
+
+const _hoisted_1 = ["data-non-enumerable"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "json-tree-view-key-node",
+  props: {
+    node: {},
+    showQuotes: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const key = vue.computed(() => jsonTreeUtils.keyPathToKey(props.node.keyPath));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("span", {
+          "data-kind": "key",
+          "data-non-enumerable": _ctx.node.isNonEnumerable ? "" : void 0
+        }, vue.toDisplayString(_ctx.showQuotes ? `"${key.value}"` : key.value), 9, _hoisted_1),
+        _cache[0] || (_cache[0] = vue.createElementVNode("span", { "data-kind": "colon" }, ":", -1))
+      ], 64);
+    };
+  }
+});
+
+exports.default = _sfc_main;

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

@@ -0,0 +1,14 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode;
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean;
+}
+declare const _default: DefineComponent<JsonTreeViewKeyNodeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<JsonTreeViewKeyNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode;
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean;
+}
+declare const _default: DefineComponent<JsonTreeViewKeyNodeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<JsonTreeViewKeyNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,26 @@
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, createElementVNode, toDisplayString } from 'vue';
+import { keyPathToKey } from '@zag-js/json-tree-utils';
+
+const _hoisted_1 = ["data-non-enumerable"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "json-tree-view-key-node",
+  props: {
+    node: {},
+    showQuotes: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const key = computed(() => keyPathToKey(props.node.keyPath));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("span", {
+          "data-kind": "key",
+          "data-non-enumerable": _ctx.node.isNonEnumerable ? "" : void 0
+        }, toDisplayString(_ctx.showQuotes ? `"${key.value}"` : key.value), 9, _hoisted_1),
+        _cache[0] || (_cache[0] = createElementVNode("span", { "data-kind": "colon" }, ":", -1))
+      ], 64);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang = require('./json-tree-view-key-node.vue.cjs');
+
+
+
+exports.default = jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang.default;

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

@@ -0,0 +1,5 @@
+import _sfc_main from './json-tree-view-key-node.vue.js';
+
+
+
+export { _sfc_main as default };

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

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const jsonTreeUtils = require('@zag-js/json-tree-utils');
+const treeViewItemText_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-item-text.vue.cjs');
+const treeViewItem_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-item.vue.cjs');
+const treeViewNodeProvider_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-node-provider.vue.cjs');
+const treeViewBranchContent_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-content.vue.cjs');
+const treeViewBranchControl_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-control.vue.cjs');
+const treeViewBranchIndentGuide_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-indent-guide.vue.cjs');
+const treeViewBranchIndicator_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-indicator.vue.cjs');
+const treeViewBranchText_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-text.vue.cjs');
+const treeViewBranch_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch.vue.cjs');
+const useTreeViewContext = require('../tree-view/use-tree-view-context.cjs');
+const jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang = require('./json-tree-view-key-node.vue.cjs');
+const jsonTreeViewPropsContext = require('./json-tree-view-props-context.cjs');
+const jsonTreeViewValueNode_vue_vue_type_script_setup_true_lang = require('./json-tree-view-value-node.vue.cjs');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "json-tree-view-node",
+  props: {
+    node: {},
+    indexPath: {},
+    indentGuide: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const tree = useTreeViewContext.useTreeViewContext();
+    const nodeState = vue.computed(() => tree.value.getNodeState({ node: props.node, indexPath: props.indexPath }));
+    const options = jsonTreeViewPropsContext.useJsonTreeViewPropsContext();
+    const key = vue.computed(() => jsonTreeUtils.keyPathToKey(props.node.keyPath, { excludeRoot: true }));
+    const valueNode = vue.computed(() => jsonTreeUtils.jsonNodeToElement(props.node, vue.toValue(options)));
+    const nodeProps = vue.computed(() => {
+      const desc = jsonTreeUtils.getAccessibleDescription(props.node);
+      const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
+      const lineLength = props.indexPath.length - 1;
+      return {
+        "aria-label": desc,
+        "data-line": line,
+        style: { ["--line-length"]: lineLength }
+      };
+    });
+    return (_ctx, _cache) => {
+      const _component_JsonTreeViewNode = vue.resolveComponent("JsonTreeViewNode", true);
+      return vue.openBlock(), vue.createBlock(treeViewNodeProvider_vue_vue_type_script_setup_true_lang.default, {
+        node: _ctx.node,
+        "index-path": _ctx.indexPath
+      }, {
+        default: vue.withCtx(() => [
+          nodeState.value.isBranch ? (vue.openBlock(), vue.createBlock(treeViewBranch_vue_vue_type_script_setup_true_lang.default, {
+            key: 0,
+            "data-scope": "json-tree-view"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(treeViewBranchControl_vue_vue_type_script_setup_true_lang.default, vue.mergeProps(nodeProps.value, { "data-scope": "json-tree-view" }), {
+                default: vue.withCtx(() => [
+                  _ctx.$slots.arrow ? (vue.openBlock(), vue.createBlock(treeViewBranchIndicator_vue_vue_type_script_setup_true_lang.default, {
+                    key: 0,
+                    "data-scope": "json-tree-view"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "arrow")
+                    ]),
+                    _: 3
+                  })) : vue.createCommentVNode("", true),
+                  vue.createVNode(treeViewBranchText_vue_vue_type_script_setup_true_lang.default, { "data-scope": "json-tree-view" }, {
+                    default: vue.withCtx(() => [
+                      key.value ? (vue.openBlock(), vue.createBlock(jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang.default, {
+                        key: 0,
+                        node: _ctx.node,
+                        "show-quotes": vue.unref(options).quotesOnKeys
+                      }, null, 8, ["node", "show-quotes"])) : vue.createCommentVNode("", true),
+                      vue.createVNode(jsonTreeViewValueNode_vue_vue_type_script_setup_true_lang.default, { node: valueNode.value }, {
+                        renderValue: vue.withCtx(({ node: childNode }) => [
+                          vue.renderSlot(_ctx.$slots, "renderValue", { node: childNode })
+                        ]),
+                        _: 3
+                      }, 8, ["node"])
+                    ]),
+                    _: 3
+                  })
+                ]),
+                _: 3
+              }, 16),
+              vue.createVNode(treeViewBranchContent_vue_vue_type_script_setup_true_lang.default, { "data-scope": "json-tree-view" }, {
+                default: vue.withCtx(() => [
+                  _ctx.$slots.indentGuide ? vue.renderSlot(_ctx.$slots, "indentGuide", { key: 0 }) : _ctx.indentGuide ? (vue.openBlock(), vue.createBlock(treeViewBranchIndentGuide_vue_vue_type_script_setup_true_lang.default, { key: 1 })) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.children, (child, index) => {
+                    return vue.openBlock(), vue.createBlock(_component_JsonTreeViewNode, vue.mergeProps({ key: index }, { ref_for: true }, _ctx.$props, {
+                      node: child,
+                      "index-path": [..._ctx.indexPath, index]
+                    }), {
+                      arrow: vue.withCtx(() => [
+                        vue.renderSlot(_ctx.$slots, "arrow")
+                      ]),
+                      indentGuide: vue.withCtx(() => [
+                        vue.renderSlot(_ctx.$slots, "indentGuide")
+                      ]),
+                      renderValue: vue.withCtx(({ node: childNode }) => [
+                        vue.renderSlot(_ctx.$slots, "renderValue", { node: childNode })
+                      ]),
+                      _: 2
+                    }, 1040, ["node", "index-path"]);
+                  }), 128))
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          })) : (vue.openBlock(), vue.createBlock(treeViewItem_vue_vue_type_script_setup_true_lang.default, vue.mergeProps({ key: 1 }, nodeProps.value, { "data-scope": "json-tree-view" }), {
+            default: vue.withCtx(() => [
+              vue.createVNode(treeViewItemText_vue_vue_type_script_setup_true_lang.default, { "data-scope": "json-tree-view" }, {
+                default: vue.withCtx(() => [
+                  key.value ? (vue.openBlock(), vue.createBlock(jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang.default, {
+                    key: 0,
+                    node: _ctx.node,
+                    "show-quotes": vue.unref(options).quotesOnKeys
+                  }, null, 8, ["node", "show-quotes"])) : vue.createCommentVNode("", true),
+                  vue.createVNode(jsonTreeViewValueNode_vue_vue_type_script_setup_true_lang.default, { node: valueNode.value }, {
+                    renderValue: vue.withCtx(({ node: childNode }) => [
+                      vue.renderSlot(_ctx.$slots, "renderValue", { node: childNode })
+                    ]),
+                    _: 3
+                  }, 8, ["node"])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 16))
+        ]),
+        _: 3
+      }, 8, ["node", "index-path"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

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

@@ -0,0 +1,28 @@
+import { JsonNode, JsonNodeHastElement } from '@zag-js/json-tree-utils';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export interface JsonTreeViewNodeBaseProps {
+    indentGuide?: boolean;
+}
+export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode;
+    indexPath: number[];
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<JsonTreeViewNodeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<JsonTreeViewNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, Readonly<{
+    arrow?(): unknown;
+    indentGuide?(): unknown;
+    renderValue?(props: {
+        node: JsonNodeHastElement;
+    }): unknown;
+}> & {
+    arrow?(): unknown;
+    indentGuide?(): unknown;
+    renderValue?(props: {
+        node: JsonNodeHastElement;
+    }): unknown;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,28 @@
+import { JsonNode, JsonNodeHastElement } from '@zag-js/json-tree-utils';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export interface JsonTreeViewNodeBaseProps {
+    indentGuide?: boolean;
+}
+export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode;
+    indexPath: number[];
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<JsonTreeViewNodeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<JsonTreeViewNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, Readonly<{
+    arrow?(): unknown;
+    indentGuide?(): unknown;
+    renderValue?(props: {
+        node: JsonNodeHastElement;
+    }): unknown;
+}> & {
+    arrow?(): unknown;
+    indentGuide?(): unknown;
+    renderValue?(props: {
+        node: JsonNodeHastElement;
+    }): unknown;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,136 @@
+import { defineComponent, computed, toValue, resolveComponent, createBlock, openBlock, withCtx, createVNode, mergeProps, createCommentVNode, renderSlot, unref, createElementBlock, Fragment, renderList } from 'vue';
+import { keyPathToKey, jsonNodeToElement, getAccessibleDescription } from '@zag-js/json-tree-utils';
+import _sfc_main$b from '../tree-view/tree-view-item-text.vue.js';
+import _sfc_main$a from '../tree-view/tree-view-item.vue.js';
+import _sfc_main$1 from '../tree-view/tree-view-node-provider.vue.js';
+import _sfc_main$8 from '../tree-view/tree-view-branch-content.vue.js';
+import _sfc_main$3 from '../tree-view/tree-view-branch-control.vue.js';
+import _sfc_main$9 from '../tree-view/tree-view-branch-indent-guide.vue.js';
+import _sfc_main$4 from '../tree-view/tree-view-branch-indicator.vue.js';
+import _sfc_main$5 from '../tree-view/tree-view-branch-text.vue.js';
+import _sfc_main$2 from '../tree-view/tree-view-branch.vue.js';
+import { useTreeViewContext } from '../tree-view/use-tree-view-context.js';
+import _sfc_main$6 from './json-tree-view-key-node.vue.js';
+import { useJsonTreeViewPropsContext } from './json-tree-view-props-context.js';
+import _sfc_main$7 from './json-tree-view-value-node.vue.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "json-tree-view-node",
+  props: {
+    node: {},
+    indexPath: {},
+    indentGuide: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const tree = useTreeViewContext();
+    const nodeState = computed(() => tree.value.getNodeState({ node: props.node, indexPath: props.indexPath }));
+    const options = useJsonTreeViewPropsContext();
+    const key = computed(() => keyPathToKey(props.node.keyPath, { excludeRoot: true }));
+    const valueNode = computed(() => jsonNodeToElement(props.node, toValue(options)));
+    const nodeProps = computed(() => {
+      const desc = getAccessibleDescription(props.node);
+      const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
+      const lineLength = props.indexPath.length - 1;
+      return {
+        "aria-label": desc,
+        "data-line": line,
+        style: { ["--line-length"]: lineLength }
+      };
+    });
+    return (_ctx, _cache) => {
+      const _component_JsonTreeViewNode = resolveComponent("JsonTreeViewNode", true);
+      return openBlock(), createBlock(_sfc_main$1, {
+        node: _ctx.node,
+        "index-path": _ctx.indexPath
+      }, {
+        default: withCtx(() => [
+          nodeState.value.isBranch ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            "data-scope": "json-tree-view"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$3, mergeProps(nodeProps.value, { "data-scope": "json-tree-view" }), {
+                default: withCtx(() => [
+                  _ctx.$slots.arrow ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 0,
+                    "data-scope": "json-tree-view"
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "arrow")
+                    ]),
+                    _: 3
+                  })) : createCommentVNode("", true),
+                  createVNode(_sfc_main$5, { "data-scope": "json-tree-view" }, {
+                    default: withCtx(() => [
+                      key.value ? (openBlock(), createBlock(_sfc_main$6, {
+                        key: 0,
+                        node: _ctx.node,
+                        "show-quotes": unref(options).quotesOnKeys
+                      }, null, 8, ["node", "show-quotes"])) : createCommentVNode("", true),
+                      createVNode(_sfc_main$7, { node: valueNode.value }, {
+                        renderValue: withCtx(({ node: childNode }) => [
+                          renderSlot(_ctx.$slots, "renderValue", { node: childNode })
+                        ]),
+                        _: 3
+                      }, 8, ["node"])
+                    ]),
+                    _: 3
+                  })
+                ]),
+                _: 3
+              }, 16),
+              createVNode(_sfc_main$8, { "data-scope": "json-tree-view" }, {
+                default: withCtx(() => [
+                  _ctx.$slots.indentGuide ? renderSlot(_ctx.$slots, "indentGuide", { key: 0 }) : _ctx.indentGuide ? (openBlock(), createBlock(_sfc_main$9, { key: 1 })) : createCommentVNode("", true),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.node.children, (child, index) => {
+                    return openBlock(), createBlock(_component_JsonTreeViewNode, mergeProps({ key: index }, { ref_for: true }, _ctx.$props, {
+                      node: child,
+                      "index-path": [..._ctx.indexPath, index]
+                    }), {
+                      arrow: withCtx(() => [
+                        renderSlot(_ctx.$slots, "arrow")
+                      ]),
+                      indentGuide: withCtx(() => [
+                        renderSlot(_ctx.$slots, "indentGuide")
+                      ]),
+                      renderValue: withCtx(({ node: childNode }) => [
+                        renderSlot(_ctx.$slots, "renderValue", { node: childNode })
+                      ]),
+                      _: 2
+                    }, 1040, ["node", "index-path"]);
+                  }), 128))
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          })) : (openBlock(), createBlock(_sfc_main$a, mergeProps({ key: 1 }, nodeProps.value, { "data-scope": "json-tree-view" }), {
+            default: withCtx(() => [
+              createVNode(_sfc_main$b, { "data-scope": "json-tree-view" }, {
+                default: withCtx(() => [
+                  key.value ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 0,
+                    node: _ctx.node,
+                    "show-quotes": unref(options).quotesOnKeys
+                  }, null, 8, ["node", "show-quotes"])) : createCommentVNode("", true),
+                  createVNode(_sfc_main$7, { node: valueNode.value }, {
+                    renderValue: withCtx(({ node: childNode }) => [
+                      renderSlot(_ctx.$slots, "renderValue", { node: childNode })
+                    ]),
+                    _: 3
+                  }, 8, ["node"])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 16))
+        ]),
+        _: 3
+      }, 8, ["node", "index-path"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsonTreeViewNode_vue_vue_type_script_setup_true_lang = require('./json-tree-view-node.vue.cjs');
+
+
+
+exports.default = jsonTreeViewNode_vue_vue_type_script_setup_true_lang.default;

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

@@ -0,0 +1,5 @@
+import _sfc_main from './json-tree-view-node.vue.js';
+
+
+
+export { _sfc_main as default };

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext.createContext("JsonTreeViewPropsContext");
+
+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 { ComputedRef } from 'vue';
+export interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+    /**
+     * Whether to show quotes on the keys.
+     */
+    quotesOnKeys?: boolean;
+}
+export declare const JsonTreeViewPropsProvider: (opts: ComputedRef<JsonTreeViewOptions>) => void, useJsonTreeViewPropsContext: (fallback?: ComputedRef<JsonTreeViewOptions> | undefined) => ComputedRef<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 { ComputedRef } from 'vue';
+export interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+    /**
+     * Whether to show quotes on the keys.
+     */
+    quotesOnKeys?: boolean;
+}
+export declare const JsonTreeViewPropsProvider: (opts: ComputedRef<JsonTreeViewOptions>) => void, useJsonTreeViewPropsContext: (fallback?: ComputedRef<JsonTreeViewOptions> | undefined) => ComputedRef<JsonTreeViewOptions>;

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

@@ -0,0 +1,5 @@
+import { createContext } from '../../utils/create-context.js';
+
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext("JsonTreeViewPropsContext");
+
+export { JsonTreeViewPropsProvider, useJsonTreeViewPropsContext };

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const treeViewRootProvider_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-root-provider.vue.cjs');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "json-tree-view-root-provider",
+  props: {
+    value: {},
+    lazyMount: { type: Boolean },
+    unmountOnExit: { type: Boolean },
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(treeViewRootProvider_vue_vue_type_script_setup_true_lang.default), vue.mergeProps({ "data-scope": "json-tree-view" }, _ctx.$props), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+
+exports.default = _sfc_main;

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

@@ -0,0 +1,22 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+import { TreeViewRootProviderProps } from '../tree-view';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<JsonTreeViewRootProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<JsonTreeViewRootProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};