@ark-ui/svelte 5.1.1 → 5.3.0

package/dist/components/checkbox/checkbox-group-provider.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte'
+
+  export interface CheckboxGroupProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    value: UseCheckboxGroupReturn
+  }
+  export interface CheckboxGroupProviderProps extends Assign<HTMLProps<'div'>, CheckboxGroupProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { CheckboxGroupContextProvider } from './use-checkbox-group-context'
+  import { checkboxAnatomy } from './checkbox.anatomy'
+
+  let { ref = $bindable(null), value, ...props }: CheckboxGroupProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps({ role: 'group', ...checkboxAnatomy.build().group.attrs }, props))
+
+  CheckboxGroupContextProvider(value)
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/checkbox/checkbox-group-provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte';
+export interface CheckboxGroupProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    value: UseCheckboxGroupReturn;
+}
+export interface CheckboxGroupProviderProps extends Assign<HTMLProps<'div'>, CheckboxGroupProviderBaseProps> {
+}
+declare const CheckboxGroupProvider: import("svelte").Component<CheckboxGroupProviderProps, {}, "ref">;
+type CheckboxGroupProvider = ReturnType<typeof CheckboxGroupProvider>;
+export default CheckboxGroupProvider;

package/dist/components/checkbox/checkbox-group.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
   import { Ark } from '../factory'
   import { checkboxAnatomy } from './checkbox.anatomy'
-  import { CheckboxGroupProvider } from './use-checkbox-group-context'
+  import { CheckboxGroupContextProvider } from './use-checkbox-group-context'
   import { splitCheckboxGroupProps } from './split-checkbox-group-props.svelte'
   import { useCheckboxGroup } from './use-checkbox-group.svelte'
 
@@ -28,7 +28,7 @@
 
   const checkboxGroup = useCheckboxGroup(() => resolvedProps)
 
-  CheckboxGroupProvider(checkboxGroup)
+  CheckboxGroupContextProvider(checkboxGroup)
 </script>
 
 <Ark as="div" bind:ref role="group" {...checkboxAnatomy.build().group.attrs} {...localProps} />

package/dist/components/checkbox/checkbox.d.ts

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 export { default as Context, type CheckboxContextProps as ContextProps } from './checkbox-context.svelte';
 export { default as Control, type CheckboxControlBaseProps as ControlBaseProps, type CheckboxControlProps as ControlProps, } from './checkbox-control.svelte';
 export { default as Group, type CheckboxGroupBaseProps as GroupBaseProps, type CheckboxGroupProps as GroupProps, } from './checkbox-group.svelte';
+export { default as GroupProvider, type CheckboxGroupProviderBaseProps as GroupProviderBaseProps, type CheckboxGroupProviderProps as GroupProviderProps, } from './checkbox-group-provider.svelte';
 export { default as HiddenInput, type CheckboxHiddenInputBaseProps as HiddenInputBaseProps, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input.svelte';
 export { default as Indicator, type CheckboxIndicatorBaseProps as IndicatorBaseProps, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator.svelte';
 export { default as Label, type CheckboxLabelBaseProps as LabelBaseProps, type CheckboxLabelProps as LabelProps, } from './checkbox-label.svelte';

package/dist/components/checkbox/checkbox.js

@@ -1,6 +1,7 @@
 export { default as Context } from './checkbox-context.svelte';
 export { default as Control, } from './checkbox-control.svelte';
 export { default as Group, } from './checkbox-group.svelte';
+export { default as GroupProvider, } from './checkbox-group-provider.svelte';
 export { default as HiddenInput, } from './checkbox-hidden-input.svelte';
 export { default as Indicator, } from './checkbox-indicator.svelte';
 export { default as Label, } from './checkbox-label.svelte';

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

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState
 export { default as CheckboxContext, type CheckboxContextProps } from './checkbox-context.svelte';
 export { default as CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps, } from './checkbox-control.svelte';
 export { default as CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps } from './checkbox-group.svelte';
+export { default as CheckboxGroupProvider, type CheckboxGroupProviderBaseProps, type CheckboxGroupProviderProps, } from './checkbox-group-provider.svelte';
 export { default as CheckboxHiddenInput, type CheckboxHiddenInputBaseProps, type CheckboxHiddenInputProps, } from './checkbox-hidden-input.svelte';
 export { default as CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps, } from './checkbox-indicator.svelte';
 export { default as CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps } from './checkbox-label.svelte';
@@ -10,7 +11,7 @@ export { default as CheckboxRoot, type CheckboxRootBaseProps, type CheckboxRootP
 export { checkboxAnatomy } from './checkbox.anatomy';
 export { CheckboxProvider, useCheckboxContext } from './use-checkbox-context';
 export type { UseCheckboxContext } from './use-checkbox-context';
-export { CheckboxGroupProvider, useCheckboxGroupContext } from './use-checkbox-group-context';
+export { useCheckboxGroupContext } from './use-checkbox-group-context';
 export type { UseCheckboxGroupContext } from './use-checkbox-group-context';
 export { useCheckboxGroup } from './use-checkbox-group.svelte';
 export type { UseCheckboxGroupProps, UseCheckboxGroupReturn } from './use-checkbox-group.svelte';

package/dist/components/checkbox/index.js

@@ -1,6 +1,7 @@
 export { default as CheckboxContext } from './checkbox-context.svelte';
 export { default as CheckboxControl, } from './checkbox-control.svelte';
 export { default as CheckboxGroup } from './checkbox-group.svelte';
+export { default as CheckboxGroupProvider, } from './checkbox-group-provider.svelte';
 export { default as CheckboxHiddenInput, } from './checkbox-hidden-input.svelte';
 export { default as CheckboxIndicator, } from './checkbox-indicator.svelte';
 export { default as CheckboxLabel } from './checkbox-label.svelte';
@@ -8,7 +9,7 @@ export { default as CheckboxRootProvider, } from './checkbox-root-provider.svelt
 export { default as CheckboxRoot } from './checkbox-root.svelte';
 export { checkboxAnatomy } from './checkbox.anatomy';
 export { CheckboxProvider, useCheckboxContext } from './use-checkbox-context';
-export { CheckboxGroupProvider, useCheckboxGroupContext } from './use-checkbox-group-context';
+export { useCheckboxGroupContext } from './use-checkbox-group-context';
 export { useCheckboxGroup } from './use-checkbox-group.svelte';
 export { useCheckbox } from './use-checkbox.svelte';
 export * as Checkbox from './checkbox';

package/dist/components/checkbox/use-checkbox-group-context.d.ts

@@ -1,4 +1,4 @@
 import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte';
 export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
 }
-export declare const CheckboxGroupProvider: (opts: UseCheckboxGroupContext) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext;
+export declare const CheckboxGroupContextProvider: (opts: UseCheckboxGroupContext) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext;

package/dist/components/checkbox/use-checkbox-group-context.js

@@ -1,5 +1,5 @@
 import { createContext } from '../../utils/create-context';
-export const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({
+export const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
     name: 'CheckboxGroupContext',
     strict: false,
 });

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

@@ -1,4 +1,5 @@
 export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
 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 } from './use-list-collection.svelte';
+export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn, } from './use-list-collection.svelte';
+export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection.svelte';

package/dist/components/collection/index.js

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

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

@@ -0,0 +1,104 @@
+import { type SelectionMode } from '@zag-js/collection';
+import { type MaybeFunction } from '@zag-js/utils';
+import type { 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: MaybeFunction<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.svelte.js

@@ -0,0 +1,91 @@
+import { Selection } from '@zag-js/collection';
+import { runIfFn } from '@zag-js/utils';
+export function useListSelection(props) {
+    const localProps = $derived.by(() => {
+        const { collection, selectionMode = 'single', deselectable = true, initialSelectedValues = [], resetOnCollectionChange = false, } = runIfFn(props);
+        return {
+            collection,
+            selectionMode,
+            deselectable,
+            initialSelectedValues,
+            resetOnCollectionChange,
+        };
+    });
+    const createSelection = (values = []) => {
+        const selection = new Selection(values);
+        selection.selectionMode = localProps.selectionMode;
+        selection.deselectable = localProps.deselectable;
+        return selection;
+    };
+    let selection = $state(createSelection(localProps.initialSelectedValues));
+    // Watch for collection changes and reset selection if needed
+    $effect(() => {
+        const { collection, resetOnCollectionChange } = localProps;
+        // Trigger effect when collection values change
+        collection.getValues();
+        if (resetOnCollectionChange) {
+            selection = createSelection();
+        }
+    });
+    const selectedValues = $derived(Array.from(selection));
+    const isEmpty = $derived(selection.isEmpty());
+    const firstSelectedValue = $derived(selection.firstSelectedValue(localProps.collection));
+    const lastSelectedValue = $derived(selection.lastSelectedValue(localProps.collection));
+    return {
+        selectedValues: () => selectedValues,
+        isEmpty: () => isEmpty,
+        firstSelectedValue: () => firstSelectedValue,
+        lastSelectedValue: () => lastSelectedValue,
+        isSelected: (value) => {
+            return selection.isSelected(value);
+        },
+        isAllSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+        },
+        isSomeSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.some((value) => selection.isSelected(value));
+        },
+        canSelect: (value) => {
+            return selection.canSelect(localProps.collection, value);
+        },
+        select: (value, forceToggle) => {
+            selection = selection.select(localProps.collection, value, forceToggle);
+        },
+        deselect: (value) => {
+            selection = selection.deselect(value);
+        },
+        toggle: (value) => {
+            selection = selection.toggleSelection(localProps.collection, value);
+        },
+        replace: (value) => {
+            selection = selection.replaceSelection(localProps.collection, value);
+        },
+        extend: (anchorValue, targetValue) => {
+            selection = selection.extendSelection(localProps.collection, anchorValue, targetValue);
+        },
+        setSelectedValues: (values) => {
+            selection = selection.setSelection(values);
+        },
+        clear: () => {
+            selection = selection.clearSelection();
+        },
+        resetSelection: () => {
+            selection = createSelection();
+        },
+        setSelection: (newSelection) => {
+            selection = selection.setSelection(newSelection);
+        },
+        setSelectionMode: (mode) => {
+            const newSelection = selection.copy();
+            newSelection.selectionMode = mode;
+            selection = newSelection;
+        },
+        setDeselectable: (deselectable) => {
+            const newSelection = selection.copy();
+            newSelection.deselectable = deselectable;
+            selection = newSelection;
+        },
+    };
+}

package/dist/components/combobox/combobox-context.svelte.d.ts

@@ -4,10 +4,17 @@ import type { UseComboboxContext } from './use-combobox-context';
 export interface ComboboxContextProps<T extends CollectionItem> {
     render: Snippet<[UseComboboxContext<T>]>;
 }
+declare function $$render<T extends CollectionItem>(): {
+    props: ComboboxContextProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ComboboxContextProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/components/combobox/combobox-root-provider.svelte.d.ts

@@ -11,10 +11,17 @@ export interface ComboboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ComboboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {
 }
+declare function $$render<T extends CollectionItem>(): {
+    props: ComboboxRootProviderProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ComboboxRootProviderProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

package/dist/components/combobox/combobox-root.svelte.d.ts

@@ -6,10 +6,17 @@ export interface ComboboxRootBaseProps<T extends CollectionItem> extends UseComb
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {
 }
+declare function $$render<T extends CollectionItem>(): {
+    props: ComboboxRootProps<T>;
+    exports: {};
+    bindings: "ref" | "value" | "open" | "inputValue";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ComboboxRootProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref" | "value" | "open" | "inputValue";
     exports(): {};
 }

package/dist/components/factory/factory.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLProps, PolymorphicProps } from '../../types';
 import type { SvelteHTMLElements } from 'svelte/elements';
-declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
-    props(): HTMLProps<T> & PolymorphicProps<T> & {
+declare function $$render<T extends keyof SvelteHTMLElements>(): {
+    props: HTMLProps<T> & PolymorphicProps<T> & {
         /**
          * The HTML tag of the component.
          */
@@ -11,8 +11,15 @@ declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
          */
         ref?: Element | null;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

package/dist/components/factory/svg-factory.svelte.d.ts

@@ -1,12 +1,19 @@
 import type { HTMLProps, PolymorphicProps } from '../../types';
 import type { SvelteHTMLElements } from 'svelte/elements';
-declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
-    props(): HTMLProps<T> & PolymorphicProps<T> & {
+declare function $$render<T extends keyof SvelteHTMLElements>(): {
+    props: HTMLProps<T> & PolymorphicProps<T> & {
         as: T;
         ref?: Element | null;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

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

@@ -13,14 +13,16 @@
   import { FileUploadProvider } from './use-file-upload-context'
   import { useFileUpload } from './use-file-upload.svelte'
 
-  let { ref = $bindable(null), ...props }: FileUploadRootProps = $props()
+  let { ref = $bindable(null), acceptedFiles = $bindable(), ...props }: FileUploadRootProps = $props()
   const providedId = $props.id()
 
   const [useFileUploadProps, localProps] = $derived(
     createSplitProps<UseFileUploadProps>()(props, [
       'accept',
+      'acceptedFiles',
       'allowDrop',
       'capture',
+      'defaultAcceptedFiles',
       'directory',
       'disabled',
       'id',
@@ -45,6 +47,11 @@
   const resolvedProps = $derived<UseFileUploadProps>({
     ...useFileUploadProps,
     id: useFileUploadProps.id ?? providedId,
+    acceptedFiles,
+    onFileChange: (details) => {
+      useFileUploadProps.onFileChange?.(details)
+      if (acceptedFiles !== undefined) acceptedFiles = details.acceptedFiles
+    },
   })
 
   const fileUpload = useFileUpload(() => resolvedProps)

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

@@ -4,6 +4,6 @@ export interface FileUploadRootBaseProps extends UseFileUploadProps, Polymorphic
 }
 export interface FileUploadRootProps extends Assign<HTMLProps<'div'>, FileUploadRootBaseProps> {
 }
-declare const FileUploadRoot: import("svelte").Component<FileUploadRootProps, {}, "ref">;
+declare const FileUploadRoot: import("svelte").Component<FileUploadRootProps, {}, "ref" | "acceptedFiles">;
 type FileUploadRoot = ReturnType<typeof FileUploadRoot>;
 export default FileUploadRoot;

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.svelte';
 export { default as Context, type FileUploadContextProps as ContextProps } from './file-upload-context.svelte';
 export { default as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone.svelte';

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

package/dist/components/index.d.ts

@@ -23,6 +23,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

@@ -23,6 +23,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/json-tree-view/get-branch-value.d.ts

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { type JsonNode, keyPathToKey } from '@zag-js/json-tree-utils'
+
+  interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean
+  }
+
+  let { node, showQuotes }: JsonTreeViewKeyNodeProps = $props()
+
+  const key = $derived(keyPathToKey(node.keyPath))
+</script>
+
+<span data-kind="key" data-non-enumerable={node.isNonEnumerable ? '' : undefined}>
+  {showQuotes ? `"${key}"` : key}
+</span>
+<span data-kind="colon">:</span>

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

@@ -0,0 +1,14 @@
+import { type JsonNode } from '@zag-js/json-tree-utils';
+interface JsonTreeViewKeyNodeProps {
+    /**
+     * The node to render.
+     */
+    node: JsonNode;
+    /**
+     * Whether to show quotes on the key.
+     */
+    showQuotes?: boolean;
+}
+declare const JsonTreeViewKeyNode: import("svelte").Component<JsonTreeViewKeyNodeProps, {}, "">;
+type JsonTreeViewKeyNode = ReturnType<typeof JsonTreeViewKeyNode>;
+export default JsonTreeViewKeyNode;