@ark-ui/react 5.16.1 → 5.18.0

package/dist/components/fieldset/use-fieldset.js

@@ -10,7 +10,8 @@ const useFieldset = (props = {}) => {
   const env = useEnvironmentContext();
   const hasErrorText = useRef(false);
   const hasHelperText = useRef(false);
-  const id = props.id ?? useId();
+  const uid = useId();
+  const id = props.id ?? uid;
   const rootRef = useRef(null);
   const errorTextId = `fieldset::${id}::error-text`;
   const helperTextId = `fieldset::${id}::helper-text`;

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

@@ -14,8 +14,10 @@ const useFileUploadContext = require('./use-file-upload-context.cjs');
 const FileUploadRoot = react.forwardRef((props, ref) => {
   const [useFileUploadProps, localProps] = createSplitProps.createSplitProps()(props, [
     "accept",
+    "acceptedFiles",
     "allowDrop",
     "capture",
+    "defaultAcceptedFiles",
     "directory",
     "disabled",
     "id",

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

@@ -10,8 +10,10 @@ import { FileUploadProvider } from './use-file-upload-context.js';
 const FileUploadRoot = forwardRef((props, ref) => {
   const [useFileUploadProps, localProps] = createSplitProps()(props, [
     "accept",
+    "acceptedFiles",
     "allowDrop",
     "capture",
+    "defaultAcceptedFiles",
     "directory",
     "disabled",
     "id",

package/dist/components/file-upload/file-upload.d.cts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails } from '@zag-js/file-upload';
+export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails, FileError, FileMimeType, FileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger as ClearTrigger, type FileUploadClearTriggerBaseProps as ClearTriggerBaseProps, type FileUploadClearTriggerProps as ClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext as Context, type FileUploadContextProps as ContextProps } from './file-upload-context';
 export { FileUploadDropzone as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone';

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

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails } from '@zag-js/file-upload';
+export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails, FileError, FileMimeType, FileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger as ClearTrigger, type FileUploadClearTriggerBaseProps as ClearTriggerBaseProps, type FileUploadClearTriggerProps as ClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext as Context, type FileUploadContextProps as ContextProps } from './file-upload-context';
 export { FileUploadDropzone as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone';

package/dist/components/file-upload/index.d.cts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, } from '@zag-js/file-upload';
+export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, FileError as FileUploadFileError, FileMimeType as FileUploadFileMimeType, FileRejection as FileUploadFileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger, type FileUploadClearTriggerBaseProps, type FileUploadClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext, type FileUploadContextProps } from './file-upload-context';
 export { FileUploadDropzone, type FileUploadDropzoneBaseProps, type FileUploadDropzoneProps, } from './file-upload-dropzone';

package/dist/components/file-upload/index.d.ts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, } from '@zag-js/file-upload';
+export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, FileError as FileUploadFileError, FileMimeType as FileUploadFileMimeType, FileRejection as FileUploadFileRejection, } from '@zag-js/file-upload';
 export { FileUploadClearTrigger, type FileUploadClearTriggerBaseProps, type FileUploadClearTriggerProps, } from './file-upload-clear-trigger';
 export { FileUploadContext, type FileUploadContextProps } from './file-upload-context';
 export { FileUploadDropzone, type FileUploadDropzoneBaseProps, type FileUploadDropzoneProps, } from './file-upload-dropzone';

package/dist/components/index.cjs

@@ -52,6 +52,7 @@ const carousel$1 = require('./carousel/carousel.cjs');
 const checkboxContext = require('./checkbox/checkbox-context.cjs');
 const checkboxControl = require('./checkbox/checkbox-control.cjs');
 const checkboxGroup = require('./checkbox/checkbox-group.cjs');
+const checkboxGroupProvider = require('./checkbox/checkbox-group-provider.cjs');
 const checkboxHiddenInput = require('./checkbox/checkbox-hidden-input.cjs');
 const checkboxIndicator = require('./checkbox/checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox/checkbox-label.cjs');
@@ -323,6 +324,11 @@ const useMenu = require('./menu/use-menu.cjs');
 const useMenuContext = require('./menu/use-menu-context.cjs');
 const useMenuItemContext = require('./menu/use-menu-item-context.cjs');
 const menu$1 = require('./menu/menu.cjs');
+const jsonTreeViewRoot = require('./json-tree-view/json-tree-view-root.cjs');
+const jsonTreeViewRootProvider = require('./json-tree-view/json-tree-view-root-provider.cjs');
+const jsonTreeViewTree = require('./json-tree-view/json-tree-view-tree.cjs');
+const useJsonTreeView = require('./json-tree-view/use-json-tree-view.cjs');
+const jsonTreeView = require('./json-tree-view/json-tree-view.cjs');
 const numberInputContext = require('./number-input/number-input-context.cjs');
 const numberInputControl = require('./number-input/number-input-control.cjs');
 const numberInputDecrementTrigger = require('./number-input/number-input-decrement-trigger.cjs');
@@ -763,6 +769,7 @@ exports.Carousel = carousel$1;
 exports.CheckboxContext = checkboxContext.CheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxGroup = checkboxGroup.CheckboxGroup;
+exports.CheckboxGroupProvider = checkboxGroupProvider.CheckboxGroupProvider;
 exports.CheckboxHiddenInput = checkboxHiddenInput.CheckboxHiddenInput;
 exports.CheckboxIndicator = checkboxIndicator.CheckboxIndicator;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
@@ -1042,6 +1049,11 @@ exports.useMenu = useMenu.useMenu;
 exports.useMenuContext = useMenuContext.useMenuContext;
 exports.useMenuItemContext = useMenuItemContext.useMenuItemContext;
 exports.Menu = menu$1;
+exports.JsonTreeViewRoot = jsonTreeViewRoot.JsonTreeViewRoot;
+exports.JsonTreeViewRootProvider = jsonTreeViewRootProvider.JsonTreeViewRootProvider;
+exports.JsonTreeViewTree = jsonTreeViewTree.JsonTreeViewTree;
+exports.useJsonTreeView = useJsonTreeView.useJsonTreeView;
+exports.JsonTreeView = jsonTreeView;
 exports.NumberInputContext = numberInputContext.NumberInputContext;
 exports.NumberInputControl = numberInputControl.NumberInputControl;
 exports.NumberInputDecrementTrigger = numberInputDecrementTrigger.NumberInputDecrementTrigger;

package/dist/components/index.d.cts

@@ -24,6 +24,7 @@ export * from './highlight';
 export * from './hover-card';
 export * from './listbox';
 export * from './menu';
+export * from './json-tree-view';
 export * from './number-input';
 export * from './pagination';
 export * from './password-input';

package/dist/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './highlight';
 export * from './hover-card';
 export * from './listbox';
 export * from './menu';
+export * from './json-tree-view';
 export * from './number-input';
 export * from './pagination';
 export * from './password-input';

package/dist/components/index.js

@@ -52,6 +52,7 @@ export { carousel as Carousel };
 export { CheckboxContext } from './checkbox/checkbox-context.js';
 export { CheckboxControl } from './checkbox/checkbox-control.js';
 export { CheckboxGroup } from './checkbox/checkbox-group.js';
+export { CheckboxGroupProvider } from './checkbox/checkbox-group-provider.js';
 export { CheckboxHiddenInput } from './checkbox/checkbox-hidden-input.js';
 export { CheckboxIndicator } from './checkbox/checkbox-indicator.js';
 export { CheckboxLabel } from './checkbox/checkbox-label.js';
@@ -339,6 +340,12 @@ export { useMenuContext } from './menu/use-menu-context.js';
 export { useMenuItemContext } from './menu/use-menu-item-context.js';
 import * as menu from './menu/menu.js';
 export { menu as Menu };
+export { JsonTreeViewRoot } from './json-tree-view/json-tree-view-root.js';
+export { JsonTreeViewRootProvider } from './json-tree-view/json-tree-view-root-provider.js';
+export { JsonTreeViewTree } from './json-tree-view/json-tree-view-tree.js';
+export { useJsonTreeView } from './json-tree-view/use-json-tree-view.js';
+import * as jsonTreeView from './json-tree-view/json-tree-view.js';
+export { jsonTreeView as JsonTreeView };
 export { NumberInputContext } from './number-input/number-input-context.js';
 export { NumberInputControl } from './number-input/number-input-control.js';
 export { NumberInputDecrementTrigger } from './number-input/number-input-decrement-trigger.js';

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

@@ -0,0 +1,19 @@
+'use client';
+'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,15 @@
+'use client';
+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 = require('./json-tree-view-root.cjs');
+const jsonTreeViewRootProvider = require('./json-tree-view-root-provider.cjs');
+const jsonTreeViewTree = require('./json-tree-view-tree.cjs');
+const useJsonTreeView = require('./use-json-tree-view.cjs');
+const jsonTreeView = require('./json-tree-view.cjs');
+
+
+
+exports.JsonTreeViewRoot = jsonTreeViewRoot.JsonTreeViewRoot;
+exports.JsonTreeViewRootProvider = jsonTreeViewRootProvider.JsonTreeViewRootProvider;
+exports.JsonTreeViewTree = jsonTreeViewTree.JsonTreeViewTree;
+exports.useJsonTreeView = useJsonTreeView.useJsonTreeView;
+exports.JsonTreeView = jsonTreeView;

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

@@ -0,0 +1,5 @@
+export { JsonTreeViewRoot, type JsonTreeViewRootProps } from './json-tree-view-root';
+export { JsonTreeViewRootProvider, type JsonTreeViewRootProviderProps } from './json-tree-view-root-provider';
+export { JsonTreeViewTree, type JsonTreeViewTreeProps } from './json-tree-view-tree';
+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 { JsonTreeViewRoot, type JsonTreeViewRootProps } from './json-tree-view-root';
+export { JsonTreeViewRootProvider, type JsonTreeViewRootProviderProps } from './json-tree-view-root-provider';
+export { JsonTreeViewTree, type JsonTreeViewTreeProps } from './json-tree-view-tree';
+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 { JsonTreeViewRoot } from './json-tree-view-root.js';
+export { JsonTreeViewRootProvider } from './json-tree-view-root-provider.js';
+export { JsonTreeViewTree } from './json-tree-view-tree.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.cjs

@@ -0,0 +1,18 @@
+'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 JsonTreeViewKeyNode = (props) => {
+  const { node, showQuotes } = props;
+  const key = jsonTreeUtils.keyPathToKey(node.keyPath);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-kind": "key", suppressHydrationWarning: true, "data-non-enumerable": node.isNonEnumerable ? "" : void 0, children: showQuotes ? `"${key}"` : key }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-kind": "colon", children: ": " })
+  ] });
+};
+
+exports.JsonTreeViewKeyNode = JsonTreeViewKeyNode;

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

@@ -0,0 +1,13 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode;
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean;
+}
+export declare const JsonTreeViewKeyNode: (props: JsonTreeViewKeyNodeProps) => React.ReactNode;
+export {};

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

@@ -0,0 +1,13 @@
+import { JsonNode } from '@zag-js/json-tree-utils';
+interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode;
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean;
+}
+export declare const JsonTreeViewKeyNode: (props: JsonTreeViewKeyNodeProps) => React.ReactNode;
+export {};

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { keyPathToKey } from '@zag-js/json-tree-utils';
+
+const JsonTreeViewKeyNode = (props) => {
+  const { node, showQuotes } = props;
+  const key = keyPathToKey(node.keyPath);
+  return /* @__PURE__ */ jsxs(Fragment, { 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: ": " })
+  ] });
+};
+
+export { JsonTreeViewKeyNode };

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>>;