@sprawlify/react 0.0.8 → 0.0.9

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

@@ -0,0 +1,246 @@
+const require_chunk = require('../../chunk-BYnRvbsk.cjs');
+require('../../core-DCWyxy9D.cjs');
+const require_create_context = require('../../create-context-CQ4U0lLj.cjs');
+require('../../environment-CvilmfQt.cjs');
+require('../../locale-BcnWD1Hf.cjs');
+require('../../providers-BNAArubQ.cjs');
+require('../../factory-C166evrS.cjs');
+require('../../collapsible-aFKYmVbP.cjs');
+const require_create_split_props = require('../../create-split-props-Dp4TWOyM.cjs');
+require('../../render-strategy-BywM_IvB.cjs');
+require('../../use-event-CLH8zHoJ.cjs');
+const require_collection = require('../../collection-DGEUORi5.cjs');
+const require_tree_view = require('../../tree-view-DsOPEocd.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __sprawlify_primitives_json_tree_utils = require("@sprawlify/primitives/json-tree-utils");
+
+//#region src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+	const 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;
+}
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-props-context.ts
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = require_create_context.createContext({
+	name: "JsonTreeViewPropsContext",
+	hookName: "useJsonTreeViewPropsContext",
+	providerName: "<JsonTreeViewPropsProvider />"
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root.tsx
+const splitJsonTreeViewProps = require_create_split_props.createSplitProps();
+const JsonTreeViewRoot = (0, react.forwardRef)((props, ref) => {
+	const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+		"maxPreviewItems",
+		"collapseStringsAfterLength",
+		"quotesOnKeys",
+		"groupArraysAfterLength",
+		"showNonenumerable"
+	]);
+	const { data, defaultExpandedDepth, ...restProps } = localProps;
+	const collection = (0, react.useMemo)(() => {
+		return require_collection.createTreeCollection({
+			nodeToValue: __sprawlify_primitives_json_tree_utils.nodeToValue,
+			nodeToString: __sprawlify_primitives_json_tree_utils.nodeToString,
+			rootNode: (0, __sprawlify_primitives_json_tree_utils.getRootNode)(data)
+		});
+	}, [data]);
+	const defaultExpandedValue = (0, react.useMemo)(() => {
+		return defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
+	}, [collection, defaultExpandedDepth]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewPropsProvider, {
+		value: jsonTreeProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tree_view.TreeViewRoot, {
+			"data-scope": "json-tree-view",
+			collection,
+			defaultExpandedValue,
+			...restProps,
+			ref
+		})
+	});
+});
+JsonTreeViewRoot.displayName = "JsonTreeViewRoot";
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root-provider.tsx
+const JsonTreeViewRootProvider = (0, react.forwardRef)((props, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tree_view.TreeViewRootProvider, {
+		"data-scope": "json-tree-view",
+		...props,
+		ref
+	});
+});
+JsonTreeViewRootProvider.displayName = "JsonTreeViewRootProvider";
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-key-node.tsx
+const JsonTreeViewKeyNode = (props) => {
+	const { node, showQuotes } = props;
+	const key = (0, __sprawlify_primitives_json_tree_utils.keyPathToKey)(node.keyPath);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-kind": "key",
+		suppressHydrationWarning: true,
+		"data-non-enumerable": node.isNonEnumerable ? "" : void 0,
+		children: showQuotes ? `"${key}"` : key
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-kind": "colon",
+		children: ": "
+	})] });
+};
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-value-node.tsx
+const JsonTreeViewValueNode = (props) => {
+	const { node, renderValue } = props;
+	if (node.type === "text") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderValue?.(node) ?? node.value });
+	const Element = node.tagName;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewValueNode, {
+			node: child,
+			renderValue
+		}, index))
+	});
+};
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-node.tsx
+const scopeProps = { "data-scope": "json-tree-view" };
+function JsonTreeViewNode(props) {
+	const { node, indexPath, arrow, indentGuide, renderValue } = props;
+	const options = useJsonTreeViewPropsContext();
+	const nodeState = require_tree_view.useTreeViewContext().getNodeState({
+		node,
+		indexPath
+	});
+	const key = (0, __sprawlify_primitives_json_tree_utils.keyPathToKey)(node.keyPath, { excludeRoot: true });
+	const valueNode = (0, react.useMemo)(() => (0, __sprawlify_primitives_json_tree_utils.jsonNodeToElement)(node, options), [node, options]);
+	const nodeProps = (0, react.useMemo)(() => {
+		const desc = (0, __sprawlify_primitives_json_tree_utils.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__ */ (0, react_jsx_runtime.jsx)(require_tree_view.TreeViewNodeProvider, {
+		node,
+		indexPath,
+		children: nodeState.isBranch ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tree_view.TreeViewBranch, {
+			...scopeProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tree_view.TreeViewBranchControl, {
+				...nodeProps,
+				children: [arrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tree_view.TreeViewBranchIndicator, {
+					...scopeProps,
+					children: arrow
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tree_view.TreeViewBranchText, {
+					...scopeProps,
+					children: [key && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewKeyNode, {
+						node,
+						showQuotes: options.quotesOnKeys
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewValueNode, {
+						node: valueNode,
+						renderValue
+					})]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tree_view.TreeViewBranchContent, {
+				...scopeProps,
+				children: [typeof indentGuide === "boolean" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tree_view.TreeViewBranchIndentGuide, {}) : indentGuide, node.children?.map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewNode, {
+					...props,
+					node: child,
+					indexPath: [...indexPath, index]
+				}, index))]
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tree_view.TreeViewItem, {
+			...nodeProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tree_view.TreeViewItemText, {
+				...scopeProps,
+				children: [key && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewKeyNode, {
+					node,
+					showQuotes: options.quotesOnKeys
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewValueNode, {
+					node: valueNode,
+					renderValue
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-tree.tsx
+const splitTreeNodeProps = require_create_split_props.createSplitProps();
+const JsonTreeViewTree = (0, react.forwardRef)((props, ref) => {
+	const [nodeProps, treeProps] = splitTreeNodeProps(props, [
+		"arrow",
+		"indentGuide",
+		"renderValue"
+	]);
+	const tree = require_tree_view.useTreeViewContext();
+	const children = tree.collection.getNodeChildren(tree.collection.rootNode);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tree_view.TreeViewTree, {
+		"data-scope": "json-tree-view",
+		...treeProps,
+		ref,
+		children: children.map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonTreeViewNode, {
+			node: child,
+			indexPath: [index],
+			...nodeProps
+		}, index))
+	});
+});
+JsonTreeViewTree.displayName = "JsonTreeViewTree";
+
+//#endregion
+//#region src/components/json-tree-view/use-json-tree-view.ts
+const useJsonTreeView = (props) => {
+	const { data, defaultExpandedDepth = 1, ...restProps } = props;
+	const collection = (0, react.useMemo)(() => {
+		return require_collection.createTreeCollection({
+			nodeToValue: __sprawlify_primitives_json_tree_utils.nodeToValue,
+			nodeToString: __sprawlify_primitives_json_tree_utils.nodeToString,
+			rootNode: (0, __sprawlify_primitives_json_tree_utils.getRootNode)(data)
+		});
+	}, [data]);
+	return require_tree_view.useTreeView({
+		defaultExpandedValue: (0, react.useMemo)(() => {
+			return defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
+		}, [collection, defaultExpandedDepth]),
+		...restProps,
+		collection,
+		typeahead: false
+	});
+};
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view.tsx
+var json_tree_view_exports = /* @__PURE__ */ require_chunk.__export({
+	Root: () => JsonTreeViewRoot,
+	RootProvider: () => JsonTreeViewRootProvider,
+	Tree: () => JsonTreeViewTree
+});
+
+//#endregion
+Object.defineProperty(exports, 'JsonTreeView', {
+  enumerable: true,
+  get: function () {
+    return json_tree_view_exports;
+  }
+});
+exports.JsonTreeViewRoot = JsonTreeViewRoot;
+exports.JsonTreeViewRootProvider = JsonTreeViewRootProvider;
+exports.JsonTreeViewTree = JsonTreeViewTree;
+exports.useJsonTreeView = useJsonTreeView;

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

@@ -0,0 +1,43 @@
+import { P as TreeViewRootProps, T as TreeViewTreeProps, at as UseTreeViewReturn, it as UseTreeViewProps, k as TreeViewRootProviderProps } from "../../index-DTzLUoop.cjs";
+import * as react412 from "react";
+import { JsonNode, JsonNodeHastElement, JsonNodePreviewOptions } from "@sprawlify/primitives/json-tree-utils";
+
+//#region src/components/json-tree-view/json-tree-view-props-context.d.ts
+interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+  quotesOnKeys?: boolean;
+}
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root.d.ts
+interface JsonTreeViewRootProps extends Omit<TreeViewRootProps<JsonNode>, "collection">, JsonTreeViewOptions {
+  data: unknown;
+  defaultExpandedDepth?: number;
+}
+declare const JsonTreeViewRoot: react412.ForwardRefExoticComponent<JsonTreeViewRootProps & react412.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root-provider.d.ts
+interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
+declare const JsonTreeViewRootProvider: react412.ForwardRefExoticComponent<JsonTreeViewRootProviderProps & react412.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-node.d.ts
+interface JsonTreeViewNodeBaseProps {
+  arrow?: React.ReactElement;
+  indentGuide?: boolean | React.ReactElement;
+  renderValue?: (node: JsonNodeHastElement) => React.ReactNode;
+}
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-tree.d.ts
+interface JsonTreeViewTreeProps extends TreeViewTreeProps, JsonTreeViewNodeBaseProps {}
+declare const JsonTreeViewTree: react412.ForwardRefExoticComponent<JsonTreeViewTreeProps & react412.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/json-tree-view/use-json-tree-view.d.ts
+interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, "collection"> {
+  data: unknown;
+  defaultExpandedDepth?: number;
+}
+interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {}
+declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseTreeViewReturn<JsonNode<any>>;
+declare namespace json_tree_view_d_exports {
+  export { JsonTreeViewRoot as Root, JsonTreeViewRootProps as RootProps, JsonTreeViewRootProvider as RootProvider, JsonTreeViewRootProviderProps as RootProviderProps, JsonTreeViewTree as Tree, JsonTreeViewTreeProps as TreeProps };
+}
+//#endregion
+export { json_tree_view_d_exports as JsonTreeView, JsonTreeViewRoot, type JsonTreeViewRootProps, JsonTreeViewRootProvider, type JsonTreeViewRootProviderProps, JsonTreeViewTree, type JsonTreeViewTreeProps, type UseJsonTreeViewProps, type UseJsonTreeViewReturn, useJsonTreeView };

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

@@ -0,0 +1,48 @@
+import "../../index-BLd57Y0z.mjs";
+import "../../factory-DaVlp4Ba.mjs";
+import "../../render-strategy-CRwPcG33.mjs";
+import "../../index-DPoOdvOg.mjs";
+import { P as TreeViewRootProps, T as TreeViewTreeProps, at as UseTreeViewReturn, it as UseTreeViewProps, k as TreeViewRootProviderProps } from "../../index-wlpTZGhs.mjs";
+import * as react180 from "react";
+import "react/jsx-runtime";
+import { JsonNode, JsonNodeHastElement, JsonNodePreviewOptions } from "@sprawlify/primitives/json-tree-utils";
+
+//#region src/components/json-tree-view/json-tree-view-props-context.d.ts
+interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+  quotesOnKeys?: boolean;
+}
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root.d.ts
+interface JsonTreeViewRootProps extends Omit<TreeViewRootProps<JsonNode>, "collection">, JsonTreeViewOptions {
+  data: unknown;
+  defaultExpandedDepth?: number;
+}
+declare const JsonTreeViewRoot: react180.ForwardRefExoticComponent<JsonTreeViewRootProps & react180.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root-provider.d.ts
+interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
+declare const JsonTreeViewRootProvider: react180.ForwardRefExoticComponent<JsonTreeViewRootProviderProps & react180.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-node.d.ts
+interface JsonTreeViewNodeBaseProps {
+  arrow?: React.ReactElement;
+  indentGuide?: boolean | React.ReactElement;
+  renderValue?: (node: JsonNodeHastElement) => React.ReactNode;
+}
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-tree.d.ts
+interface JsonTreeViewTreeProps extends TreeViewTreeProps, JsonTreeViewNodeBaseProps {}
+declare const JsonTreeViewTree: react180.ForwardRefExoticComponent<JsonTreeViewTreeProps & react180.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/json-tree-view/use-json-tree-view.d.ts
+interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, "collection"> {
+  data: unknown;
+  defaultExpandedDepth?: number;
+}
+interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {}
+declare const useJsonTreeView: (props: UseJsonTreeViewProps) => UseTreeViewReturn<JsonNode<any>>;
+declare namespace json_tree_view_d_exports {
+  export { JsonTreeViewRoot as Root, JsonTreeViewRootProps as RootProps, JsonTreeViewRootProvider as RootProvider, JsonTreeViewRootProviderProps as RootProviderProps, JsonTreeViewTree as Tree, JsonTreeViewTreeProps as TreeProps };
+}
+//#endregion
+export { json_tree_view_d_exports as JsonTreeView, JsonTreeViewRoot, type JsonTreeViewRootProps, JsonTreeViewRootProvider, type JsonTreeViewRootProviderProps, JsonTreeViewTree, type JsonTreeViewTreeProps, type UseJsonTreeViewProps, type UseJsonTreeViewReturn, useJsonTreeView };

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

@@ -0,0 +1,237 @@
+import { t as __export } from "../../chunk-BU8PiJgx.mjs";
+import "../../core-79NSyZp-.mjs";
+import { t as createContext$1 } from "../../create-context-DbhrVE2B.mjs";
+import "../../environment-Cc02I6aF.mjs";
+import "../../locale-D4LX0eEq.mjs";
+import "../../providers-CoJceYkV.mjs";
+import "../../factory-7ydMApfi.mjs";
+import "../../collapsible-vqmKK3px.mjs";
+import { t as createSplitProps } from "../../create-split-props-BJdRM9I_.mjs";
+import "../../render-strategy-BgIBKraZ.mjs";
+import "../../use-event-B4e6iJDK.mjs";
+import { a as createTreeCollection } from "../../collection-BYYMj_V8.mjs";
+import { C as TreeViewBranch, S as TreeViewBranchContent, T as useTreeViewContext, b as TreeViewBranchIndentGuide, c as TreeViewRoot, h as TreeViewItem, l as useTreeView, o as TreeViewTree, p as TreeViewItemText, s as TreeViewRootProvider, u as TreeViewNodeProvider, v as TreeViewBranchText, x as TreeViewBranchControl, y as TreeViewBranchIndicator } from "../../tree-view-CzJvwlYQ.mjs";
+import { forwardRef, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { getAccessibleDescription, getRootNode, jsonNodeToElement, keyPathToKey, nodeToString, nodeToValue } from "@sprawlify/primitives/json-tree-utils";
+
+//#region src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+	const 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;
+}
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-props-context.ts
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext$1({
+	name: "JsonTreeViewPropsContext",
+	hookName: "useJsonTreeViewPropsContext",
+	providerName: "<JsonTreeViewPropsProvider />"
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root.tsx
+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";
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root-provider.tsx
+const JsonTreeViewRootProvider = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(TreeViewRootProvider, {
+		"data-scope": "json-tree-view",
+		...props,
+		ref
+	});
+});
+JsonTreeViewRootProvider.displayName = "JsonTreeViewRootProvider";
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-key-node.tsx
+const JsonTreeViewKeyNode = (props) => {
+	const { node, showQuotes } = props;
+	const key = keyPathToKey(node.keyPath);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"data-kind": "key",
+		suppressHydrationWarning: true,
+		"data-non-enumerable": node.isNonEnumerable ? "" : void 0,
+		children: showQuotes ? `"${key}"` : key
+	}), /* @__PURE__ */ jsx("span", {
+		"data-kind": "colon",
+		children: ": "
+	})] });
+};
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-value-node.tsx
+const JsonTreeViewValueNode = (props) => {
+	const { node, renderValue } = props;
+	if (node.type === "text") return /* @__PURE__ */ jsx(Fragment$1, { 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))
+	});
+};
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-node.tsx
+const scopeProps = { "data-scope": "json-tree-view" };
+function JsonTreeViewNode(props) {
+	const { node, indexPath, arrow, indentGuide, renderValue } = props;
+	const options = useJsonTreeViewPropsContext();
+	const nodeState = useTreeViewContext().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
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-tree.tsx
+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";
+
+//#endregion
+//#region src/components/json-tree-view/use-json-tree-view.ts
+const useJsonTreeView = (props) => {
+	const { data, defaultExpandedDepth = 1, ...restProps } = props;
+	const collection = useMemo(() => {
+		return createTreeCollection({
+			nodeToValue,
+			nodeToString,
+			rootNode: getRootNode(data)
+		});
+	}, [data]);
+	return useTreeView({
+		defaultExpandedValue: useMemo(() => {
+			return defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
+		}, [collection, defaultExpandedDepth]),
+		...restProps,
+		collection,
+		typeahead: false
+	});
+};
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view.tsx
+var json_tree_view_exports = /* @__PURE__ */ __export({
+	Root: () => JsonTreeViewRoot,
+	RootProvider: () => JsonTreeViewRootProvider,
+	Tree: () => JsonTreeViewTree
+});
+
+//#endregion
+export { json_tree_view_exports as JsonTreeView, JsonTreeViewRoot, JsonTreeViewRootProvider, JsonTreeViewTree, useJsonTreeView };