@ark-ui/vue 5.16.1 → 5.18.0

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

@@ -0,0 +1,104 @@
+import { SelectionMode } from '@zag-js/collection';
+import { MaybeRef, Ref } from 'vue';
+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: MaybeRef<UseListSelectionProps<T>>): UseListSelectionReturn;
+export interface UseListSelectionReturn {
+    /**
+     * The selected values as an array.
+     */
+    selectedValues: Ref<string[]>;
+    /**
+     * Whether the selection is empty.
+     */
+    isEmpty: Ref<boolean>;
+    /**
+     * The first selected value.
+     */
+    firstSelectedValue: Ref<string | null>;
+    /**
+     * The last selected value.
+     */
+    lastSelectedValue: Ref<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,111 @@
+import { Selection } from '@zag-js/collection';
+import { computed, toValue, shallowRef, watch } from 'vue';
+
+function useListSelection(props) {
+  const resolvedProps = computed(() => {
+    const {
+      collection,
+      selectionMode = "single",
+      deselectable = true,
+      initialSelectedValues = [],
+      resetOnCollectionChange = false
+    } = toValue(props);
+    return { collection, selectionMode, deselectable, initialSelectedValues, resetOnCollectionChange };
+  });
+  const createSelection = (values = []) => {
+    const { selectionMode, deselectable } = resolvedProps.value;
+    const selection2 = new Selection(values);
+    selection2.selectionMode = selectionMode;
+    selection2.deselectable = deselectable;
+    return selection2;
+  };
+  const init = () => {
+    const { initialSelectedValues } = resolvedProps.value;
+    return createSelection(initialSelectedValues);
+  };
+  const selection = shallowRef(init());
+  watch(
+    [() => resolvedProps.value.collection.getValues(), () => resolvedProps.value.resetOnCollectionChange],
+    ([, resetOnCollectionChange]) => {
+      if (resetOnCollectionChange) {
+        selection.value = createSelection();
+      }
+    }
+  );
+  const selectedValues = computed(() => Array.from(selection.value));
+  const isEmpty = computed(() => selection.value.isEmpty());
+  const firstSelectedValue = computed(() => {
+    const { collection } = resolvedProps.value;
+    return selection.value.firstSelectedValue(collection);
+  });
+  const lastSelectedValue = computed(() => {
+    const { collection } = resolvedProps.value;
+    return selection.value.lastSelectedValue(collection);
+  });
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: (value) => {
+      return selection.value.isSelected(value);
+    },
+    isAllSelected: () => {
+      const { collection } = resolvedProps.value;
+      const allValues = collection.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection.value.isSelected(value));
+    },
+    isSomeSelected: () => {
+      const { collection } = resolvedProps.value;
+      const allValues = collection.getValues();
+      return allValues.some((value) => selection.value.isSelected(value));
+    },
+    canSelect: (value) => {
+      const { collection } = resolvedProps.value;
+      return selection.value.canSelect(collection, value);
+    },
+    select: (value, forceToggle) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.select(collection, value, forceToggle);
+    },
+    deselect: (value) => {
+      selection.value = selection.value.deselect(value);
+    },
+    toggle: (value) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.toggleSelection(collection, value);
+    },
+    replace: (value) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.replaceSelection(collection, value);
+    },
+    extend: (anchorValue, targetValue) => {
+      const { collection } = resolvedProps.value;
+      selection.value = selection.value.extendSelection(collection, anchorValue, targetValue);
+    },
+    setSelectedValues: (values) => {
+      selection.value = selection.value.setSelection(values);
+    },
+    clear: () => {
+      selection.value = selection.value.clearSelection();
+    },
+    resetSelection: () => {
+      selection.value = createSelection();
+    },
+    setSelection: (newSelection) => {
+      selection.value = selection.value.setSelection(newSelection);
+    },
+    setSelectionMode: (mode) => {
+      const newSelection = selection.value.copy();
+      newSelection.selectionMode = mode;
+      selection.value = newSelection;
+    },
+    setDeselectable: (deselectable) => {
+      const newSelection = selection.value.copy();
+      newSelection.deselectable = deselectable;
+      selection.value = newSelection;
+    }
+  };
+}
+
+export { useListSelection };

package/dist/components/combobox/combobox-item-group.vue.cjs

@@ -17,7 +17,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const combobox = useComboboxContext.useComboboxContext();
-    const id = props.id ?? vue.useId();
+    const uid = vue.useId();
+    const id = props.id ?? uid;
     useComboboxItemGroupPropsContext.ComboboxItemGroupPropsProvider({ id });
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/combobox/combobox-item-group.vue.js

@@ -13,7 +13,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const combobox = useComboboxContext();
-    const id = props.id ?? useId();
+    const uid = useId();
+    const id = props.id ?? uid;
     ComboboxItemGroupPropsProvider({ id });
     useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/date-picker/date-picker-table.vue.cjs

@@ -21,7 +21,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const datePicker = useDatePickerContext.useDatePickerContext();
     const viewProps = useDatePickerViewPropsContext.useDatePickerViewPropsContext();
-    const id = props.id ?? vue.useId();
+    const uid = vue.useId();
+    const id = props.id ?? uid;
     useDatePickerTablePropsContext.DatePickerTablePropsProvider({ ...props, id, ...viewProps });
     useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/date-picker/date-picker-table.vue.js

@@ -17,7 +17,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const datePicker = useDatePickerContext();
     const viewProps = useDatePickerViewPropsContext();
-    const id = props.id ?? useId();
+    const uid = useId();
+    const id = props.id ?? uid;
     DatePickerTablePropsProvider({ ...props, id, ...viewProps });
     useForwardExpose();
     return (_ctx, _cache) => {

package/dist/components/date-picker/use-date-picker.cjs

@@ -58,7 +58,6 @@ const useDatePicker = (props = {}, emit) => {
       },
       onValueChange: (details) => {
         emit?.("valueChange", details);
-        console.log("valueChange", details);
         emit?.("update:modelValue", details.value);
         localeProps.onValueChange?.(details);
       }

package/dist/components/date-picker/use-date-picker.js

@@ -35,7 +35,6 @@ const useDatePicker = (props = {}, emit) => {
       },
       onValueChange: (details) => {
         emit?.("valueChange", details);
-        console.log("valueChange", details);
         emit?.("update:modelValue", details.value);
         localeProps.onValueChange?.(details);
       }

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

@@ -12,6 +12,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "file-upload-root",
   props: /* @__PURE__ */ vue.mergeDefaults({
     accept: {},
+    defaultAcceptedFiles: {},
     allowDrop: { type: Boolean },
     capture: {},
     directory: { type: Boolean },
@@ -38,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     preventDocumentDrop: void 0,
     required: void 0
   }),
-  emits: ["fileAccept", "fileChange", "fileReject"],
+  emits: ["update:acceptedFiles", "fileAccept", "fileChange", "fileReject"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;

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

@@ -13,10 +13,12 @@ HTMLAttributes {
 export interface FileUploadRootEmits extends RootEmits {
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<FileUploadRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:acceptedFiles": (files: File[]) => any;
     fileAccept: (details: FileAcceptDetails) => any;
     fileChange: (details: FileChangeDetails) => any;
     fileReject: (details: FileRejectDetails) => any;
 }, string, PublicProps, Readonly<FileUploadRootProps> & Readonly<{
+    "onUpdate:acceptedFiles"?: ((files: File[]) => any) | undefined;
     onFileAccept?: ((details: FileAcceptDetails) => any) | undefined;
     onFileChange?: ((details: FileChangeDetails) => any) | undefined;
     onFileReject?: ((details: FileRejectDetails) => any) | undefined;

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

@@ -13,10 +13,12 @@ HTMLAttributes {
 export interface FileUploadRootEmits extends RootEmits {
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<FileUploadRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:acceptedFiles": (files: File[]) => any;
     fileAccept: (details: FileAcceptDetails) => any;
     fileChange: (details: FileChangeDetails) => any;
     fileReject: (details: FileRejectDetails) => any;
 }, string, PublicProps, Readonly<FileUploadRootProps> & Readonly<{
+    "onUpdate:acceptedFiles"?: ((files: File[]) => any) | undefined;
     onFileAccept?: ((details: FileAcceptDetails) => any) | undefined;
     onFileChange?: ((details: FileChangeDetails) => any) | undefined;
     onFileReject?: ((details: FileRejectDetails) => any) | undefined;

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

@@ -8,6 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "file-upload-root",
   props: /* @__PURE__ */ mergeDefaults({
     accept: {},
+    defaultAcceptedFiles: {},
     allowDrop: { type: Boolean },
     capture: {},
     directory: { type: Boolean },
@@ -34,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     preventDocumentDrop: void 0,
     required: void 0
   }),
-  emits: ["fileAccept", "fileChange", "fileReject"],
+  emits: ["update:acceptedFiles", "fileAccept", "fileChange", "fileReject"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;

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 { default as ClearTrigger, type FileUploadClearTriggerBaseProps as ClearTriggerBaseProps, type FileUploadClearTriggerProps as ClearTriggerProps, } from './file-upload-clear-trigger.vue';
 export { default as Context, type FileUploadContextProps as ContextProps } from './file-upload-context.vue';
 export { default as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone.vue';

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 { default as ClearTrigger, type FileUploadClearTriggerBaseProps as ClearTriggerBaseProps, type FileUploadClearTriggerProps as ClearTriggerProps, } from './file-upload-clear-trigger.vue';
 export { default as Context, type FileUploadContextProps as ContextProps } from './file-upload-context.vue';
 export { default as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone.vue';

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

@@ -4,6 +4,10 @@ export interface RootProps {
      * The accept file types
      */
     accept?: Record<string, string[]> | fileUpload.FileMimeType | fileUpload.FileMimeType[];
+    /**
+     * The default accepted files
+     */
+    defaultAcceptedFiles?: File[];
     /**
      * Whether to allow drag and drop in the dropzone element
      * @default true
@@ -92,6 +96,10 @@ export interface RootProps {
     transformFiles?: (files: File[]) => Promise<File[]>;
 }
 export type RootEmits = {
+    /**
+     * Function called when the accepted files change
+     */
+    'update:acceptedFiles': [files: File[]];
     /**
      * Function called when the file is accepted
      */

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

@@ -4,6 +4,10 @@ export interface RootProps {
      * The accept file types
      */
     accept?: Record<string, string[]> | fileUpload.FileMimeType | fileUpload.FileMimeType[];
+    /**
+     * The default accepted files
+     */
+    defaultAcceptedFiles?: File[];
     /**
      * Whether to allow drag and drop in the dropzone element
      * @default true
@@ -92,6 +96,10 @@ export interface RootProps {
     transformFiles?: (files: File[]) => Promise<File[]>;
 }
 export type RootEmits = {
+    /**
+     * Function called when the accepted files change
+     */
+    'update:acceptedFiles': [files: File[]];
     /**
      * Function called when the file is accepted
      */

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 { default as FileUploadClearTrigger, type FileUploadClearTriggerBaseProps, type FileUploadClearTriggerProps, } from './file-upload-clear-trigger.vue';
 export { default as FileUploadContext, type FileUploadContextProps } from './file-upload-context.vue';
 export { default as FileUploadDropzone, type FileUploadDropzoneBaseProps, type FileUploadDropzoneProps, } from './file-upload-dropzone.vue';

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 { default as FileUploadClearTrigger, type FileUploadClearTriggerBaseProps, type FileUploadClearTriggerProps, } from './file-upload-clear-trigger.vue';
 export { default as FileUploadContext, type FileUploadContextProps } from './file-upload-context.vue';
 export { default as FileUploadDropzone, type FileUploadDropzoneBaseProps, type FileUploadDropzoneProps, } from './file-upload-dropzone.vue';

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

@@ -50,6 +50,7 @@ const useFileUpload = (props = {}, emit) => {
       getRootNode: env?.value.getRootNode,
       ...cleanProps.cleanProps(localeProps),
       onFileChange: (details) => {
+        emit?.("update:acceptedFiles", details.acceptedFiles);
         emit?.("fileChange", details);
         localeProps.onFileChange?.(details);
       },

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

@@ -27,6 +27,7 @@ const useFileUpload = (props = {}, emit) => {
       getRootNode: env?.value.getRootNode,
       ...cleanProps(localeProps),
       onFileChange: (details) => {
+        emit?.("update:acceptedFiles", details.acceptedFiles);
         emit?.("fileChange", details);
         localeProps.onFileChange?.(details);
       },

package/dist/components/index.cjs

@@ -52,6 +52,7 @@ const carousel$1 = require('./carousel/carousel.cjs');
 const checkboxContext_vue_vue_type_script_setup_true_lang = require('./checkbox/checkbox-context.vue.cjs');
 const checkboxControl_vue_vue_type_script_setup_true_lang = require('./checkbox/checkbox-control.vue.cjs');
 const checkboxGroup_vue_vue_type_script_setup_true_lang = require('./checkbox/checkbox-group.vue.cjs');
+const checkboxGroupProvider_vue_vue_type_script_setup_true_lang = require('./checkbox/checkbox-group-provider.vue.cjs');
 const checkboxHiddenInput_vue_vue_type_script_setup_true_lang = require('./checkbox/checkbox-hidden-input.vue.cjs');
 const checkboxIndicator_vue_vue_type_script_setup_true_lang = require('./checkbox/checkbox-indicator.vue.cjs');
 const checkboxLabel_vue_vue_type_script_setup_true_lang = require('./checkbox/checkbox-label.vue.cjs');
@@ -281,6 +282,11 @@ const hoverCardTrigger_vue_vue_type_script_setup_true_lang = require('./hover-ca
 const useHoverCard = require('./hover-card/use-hover-card.cjs');
 const useHoverCardContext = require('./hover-card/use-hover-card-context.cjs');
 const hoverCard$1 = require('./hover-card/hover-card.cjs');
+const jsonTreeViewRoot_vue_vue_type_script_setup_true_lang = require('./json-tree-view/json-tree-view-root.vue.cjs');
+const jsonTreeViewRootProvider_vue_vue_type_script_setup_true_lang = require('./json-tree-view/json-tree-view-root-provider.vue.cjs');
+const jsonTreeViewTree_vue_vue_type_script_setup_true_lang = require('./json-tree-view/json-tree-view-tree.vue.cjs');
+const useJsonTreeView = require('./json-tree-view/use-json-tree-view.cjs');
+const jsonTreeView = require('./json-tree-view/json-tree-view.cjs');
 const listboxContext_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-context.vue.cjs');
 const listboxContent_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-content.vue.cjs');
 const listboxInput_vue_vue_type_script_setup_true_lang = require('./listbox/listbox-input.vue.cjs');
@@ -761,6 +767,7 @@ exports.Carousel = carousel$1;
 exports.CheckboxContext = checkboxContext_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxControl = checkboxControl_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxGroup = checkboxGroup_vue_vue_type_script_setup_true_lang.default;
+exports.CheckboxGroupProvider = checkboxGroupProvider_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxHiddenInput = checkboxHiddenInput_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxIndicator = checkboxIndicator_vue_vue_type_script_setup_true_lang.default;
 exports.CheckboxLabel = checkboxLabel_vue_vue_type_script_setup_true_lang.default;
@@ -998,6 +1005,11 @@ exports.HoverCardTrigger = hoverCardTrigger_vue_vue_type_script_setup_true_lang.
 exports.useHoverCard = useHoverCard.useHoverCard;
 exports.useHoverCardContext = useHoverCardContext.useHoverCardContext;
 exports.HoverCard = hoverCard$1;
+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;
 exports.ListboxContext = listboxContext_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxContent = listboxContent_vue_vue_type_script_setup_true_lang.default;
 exports.ListboxInput = listboxInput_vue_vue_type_script_setup_true_lang.default;

package/dist/components/index.d.cts

@@ -22,6 +22,7 @@ export * from './format';
 export * from './frame';
 export * from './highlight';
 export * from './hover-card';
+export * from './json-tree-view';
 export * from './listbox';
 export * from './menu';
 export * from './number-input';

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './format';
 export * from './frame';
 export * from './highlight';
 export * from './hover-card';
+export * from './json-tree-view';
 export * from './listbox';
 export * from './menu';
 export * from './number-input';

package/dist/components/index.js

@@ -52,6 +52,7 @@ export { carousel as Carousel };
 export { default as CheckboxContext } from './checkbox/checkbox-context.vue.js';
 export { default as CheckboxControl } from './checkbox/checkbox-control.vue.js';
 export { default as CheckboxGroup } from './checkbox/checkbox-group.vue.js';
+export { default as CheckboxGroupProvider } from './checkbox/checkbox-group-provider.vue.js';
 export { default as CheckboxHiddenInput } from './checkbox/checkbox-hidden-input.vue.js';
 export { default as CheckboxIndicator } from './checkbox/checkbox-indicator.vue.js';
 export { default as CheckboxLabel } from './checkbox/checkbox-label.vue.js';
@@ -295,6 +296,12 @@ export { useHoverCard } from './hover-card/use-hover-card.js';
 export { useHoverCardContext } from './hover-card/use-hover-card-context.js';
 import * as hoverCard from './hover-card/hover-card.js';
 export { hoverCard as HoverCard };
+export { default as JsonTreeViewRoot } from './json-tree-view/json-tree-view-root.vue.js';
+export { default as JsonTreeViewRootProvider } from './json-tree-view/json-tree-view-root-provider.vue.js';
+export { default as JsonTreeViewTree } from './json-tree-view/json-tree-view-tree.vue.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 { default as ListboxContext } from './listbox/listbox-context.vue.js';
 export { default as ListboxContent } from './listbox/listbox-content.vue.js';
 export { default as ListboxInput } from './listbox/listbox-input.vue.js';

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;