@ark-ui/react 5.17.0 → 5.18.0

package/dist/components/collection/index.cjs

@@ -6,6 +6,7 @@ const gridCollection = require('./grid-collection.cjs');
 const listCollection = require('./list-collection.cjs');
 const treeCollection = require('./tree-collection.cjs');
 const useListCollection = require('./use-list-collection.cjs');
+const useListSelection = require('./use-list-selection.cjs');
 
 
 
@@ -14,3 +15,4 @@ exports.createListCollection = listCollection.createListCollection;
 exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
 exports.createTreeCollection = treeCollection.createTreeCollection;
 exports.useListCollection = useListCollection.useListCollection;
+exports.useListSelection = useListSelection.useListSelection;

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

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

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

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

package/dist/components/collection/index.js

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

package/dist/components/collection/use-list-selection.cjs

@@ -0,0 +1,96 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const collection = require('@zag-js/collection');
+const react = require('react');
+const useEvent = require('../../utils/use-event.cjs');
+
+function useListSelection(props) {
+  const {
+    collection: collection$1,
+    selectionMode = "single",
+    deselectable = true,
+    initialSelectedValues = [],
+    resetOnCollectionChange = false
+  } = props;
+  const createSelection = react.useCallback(
+    (values = []) => {
+      const selection2 = new collection.Selection(values);
+      selection2.selectionMode = selectionMode;
+      selection2.deselectable = deselectable;
+      return selection2;
+    },
+    [selectionMode, deselectable]
+  );
+  const [selection, setSelectionState] = react.useState(() => createSelection(initialSelectedValues));
+  react.useEffect(() => {
+    if (resetOnCollectionChange) {
+      setSelectionState(createSelection());
+    }
+  }, [collection$1.toString(), resetOnCollectionChange, createSelection]);
+  const selectedValues = react.useMemo(() => Array.from(selection), [selection]);
+  const isEmpty = react.useMemo(() => selection.isEmpty(), [selection]);
+  const firstSelectedValue = react.useMemo(() => selection.firstSelectedValue(collection$1), [selection, collection$1]);
+  const lastSelectedValue = react.useMemo(() => selection.lastSelectedValue(collection$1), [selection, collection$1]);
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: useEvent.useEvent((value) => {
+      return selection.isSelected(value);
+    }),
+    isAllSelected: useEvent.useEvent(() => {
+      const allValues = collection$1.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+    }),
+    isSomeSelected: useEvent.useEvent(() => {
+      const allValues = collection$1.getValues();
+      return allValues.some((value) => selection.isSelected(value));
+    }),
+    canSelect: useEvent.useEvent((value) => {
+      return selection.canSelect(collection$1, value);
+    }),
+    select: useEvent.useEvent((value, forceToggle) => {
+      setSelectionState(selection.select(collection$1, value, forceToggle));
+    }),
+    deselect: useEvent.useEvent((value) => {
+      setSelectionState(selection.deselect(value));
+    }),
+    toggle: useEvent.useEvent((value) => {
+      setSelectionState(selection.toggleSelection(collection$1, value));
+    }),
+    replace: useEvent.useEvent((value) => {
+      setSelectionState(selection.replaceSelection(collection$1, value));
+    }),
+    extend: useEvent.useEvent((anchorValue, targetValue) => {
+      setSelectionState(selection.extendSelection(collection$1, anchorValue, targetValue));
+    }),
+    setSelectedValues: useEvent.useEvent((values) => {
+      setSelectionState(selection.setSelection(values));
+    }),
+    clear: useEvent.useEvent(() => {
+      setSelectionState(selection.clearSelection());
+    }),
+    resetSelection: useEvent.useEvent(() => {
+      setSelectionState(createSelection());
+    }),
+    setSelection: useEvent.useEvent((newSelection) => {
+      setSelectionState(selection.setSelection(newSelection));
+    }),
+    setSelectionMode: useEvent.useEvent((mode) => {
+      const newSelection = selection.copy();
+      newSelection.selectionMode = mode;
+      setSelectionState(newSelection);
+    }),
+    setDeselectable: useEvent.useEvent((deselectable2) => {
+      const newSelection = selection.copy();
+      newSelection.deselectable = deselectable2;
+      setSelectionState(newSelection);
+    })
+  };
+}
+
+exports.useListSelection = useListSelection;

package/dist/components/collection/use-list-selection.d.cts

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

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

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

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

@@ -0,0 +1,92 @@
+'use client';
+import { Selection } from '@zag-js/collection';
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useEvent } from '../../utils/use-event.js';
+
+function useListSelection(props) {
+  const {
+    collection,
+    selectionMode = "single",
+    deselectable = true,
+    initialSelectedValues = [],
+    resetOnCollectionChange = false
+  } = props;
+  const createSelection = useCallback(
+    (values = []) => {
+      const selection2 = new Selection(values);
+      selection2.selectionMode = selectionMode;
+      selection2.deselectable = deselectable;
+      return selection2;
+    },
+    [selectionMode, deselectable]
+  );
+  const [selection, setSelectionState] = useState(() => createSelection(initialSelectedValues));
+  useEffect(() => {
+    if (resetOnCollectionChange) {
+      setSelectionState(createSelection());
+    }
+  }, [collection.toString(), resetOnCollectionChange, createSelection]);
+  const selectedValues = useMemo(() => Array.from(selection), [selection]);
+  const isEmpty = useMemo(() => selection.isEmpty(), [selection]);
+  const firstSelectedValue = useMemo(() => selection.firstSelectedValue(collection), [selection, collection]);
+  const lastSelectedValue = useMemo(() => selection.lastSelectedValue(collection), [selection, collection]);
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: useEvent((value) => {
+      return selection.isSelected(value);
+    }),
+    isAllSelected: useEvent(() => {
+      const allValues = collection.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+    }),
+    isSomeSelected: useEvent(() => {
+      const allValues = collection.getValues();
+      return allValues.some((value) => selection.isSelected(value));
+    }),
+    canSelect: useEvent((value) => {
+      return selection.canSelect(collection, value);
+    }),
+    select: useEvent((value, forceToggle) => {
+      setSelectionState(selection.select(collection, value, forceToggle));
+    }),
+    deselect: useEvent((value) => {
+      setSelectionState(selection.deselect(value));
+    }),
+    toggle: useEvent((value) => {
+      setSelectionState(selection.toggleSelection(collection, value));
+    }),
+    replace: useEvent((value) => {
+      setSelectionState(selection.replaceSelection(collection, value));
+    }),
+    extend: useEvent((anchorValue, targetValue) => {
+      setSelectionState(selection.extendSelection(collection, anchorValue, targetValue));
+    }),
+    setSelectedValues: useEvent((values) => {
+      setSelectionState(selection.setSelection(values));
+    }),
+    clear: useEvent(() => {
+      setSelectionState(selection.clearSelection());
+    }),
+    resetSelection: useEvent(() => {
+      setSelectionState(createSelection());
+    }),
+    setSelection: useEvent((newSelection) => {
+      setSelectionState(selection.setSelection(newSelection));
+    }),
+    setSelectionMode: useEvent((mode) => {
+      const newSelection = selection.copy();
+      newSelection.selectionMode = mode;
+      setSelectionState(newSelection);
+    }),
+    setDeselectable: useEvent((deselectable2) => {
+      const newSelection = selection.copy();
+      newSelection.deselectable = deselectable2;
+      setSelectionState(newSelection);
+    })
+  };
+}
+
+export { useListSelection };

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/index.cjs

@@ -324,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');
@@ -1044,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

@@ -340,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 };