@ark-ui/svelte 5.2.0 → 5.3.1

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

@@ -0,0 +1,18 @@
+import { type JsonNode } from '@zag-js/json-tree-utils';
+import { type TreeViewRootProps } from '../tree-view';
+import { type JsonTreeViewOptions } from './json-tree-view-props-context';
+export interface JsonTreeViewRootBaseProps extends JsonTreeViewOptions {
+    /**
+     * The data to display in the tree.
+     */
+    data: unknown;
+    /**
+     * The default expand level.
+     */
+    defaultExpandedDepth?: number;
+}
+export interface JsonTreeViewRootProps extends Omit<TreeViewRootProps<JsonNode>, 'collection'>, JsonTreeViewRootBaseProps {
+}
+declare const JsonTreeViewRoot: import("svelte").Component<JsonTreeViewRootProps, {}, "">;
+type JsonTreeViewRoot = ReturnType<typeof JsonTreeViewRoot>;
+export default JsonTreeViewRoot;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { TreeView, useTreeViewContext, type TreeViewTreeProps } from '../tree-view'
+  import JsonTreeViewNode, { type JsonTreeViewNodeBaseProps } from './json-tree-view-node.svelte'
+
+  export interface JsonTreeViewTreeBaseProps extends JsonTreeViewNodeBaseProps {}
+
+  export interface JsonTreeViewTreeProps extends TreeViewTreeProps, JsonTreeViewTreeBaseProps {}
+
+  const props: JsonTreeViewTreeProps = $props()
+
+  const splitTreeNodeProps = createSplitProps<JsonTreeViewNodeBaseProps>()
+  const [nodeProps, treeProps] = splitTreeNodeProps(props, ['arrow', 'indentGuide', 'renderValue'])
+
+  const tree = useTreeViewContext()
+  const children = $derived(tree().collection.getNodeChildren(tree().collection.rootNode))
+</script>
+
+<TreeView.Tree data-scope="json-tree-view" {...treeProps}>
+  {#each children as child, index (index)}
+    <JsonTreeViewNode node={child} indexPath={[index]} {...nodeProps} />
+  {/each}
+</TreeView.Tree>

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

@@ -0,0 +1,9 @@
+import { type TreeViewTreeProps } from '../tree-view';
+import { type JsonTreeViewNodeBaseProps } from './json-tree-view-node.svelte';
+export interface JsonTreeViewTreeBaseProps extends JsonTreeViewNodeBaseProps {
+}
+export interface JsonTreeViewTreeProps extends TreeViewTreeProps, JsonTreeViewTreeBaseProps {
+}
+declare const JsonTreeViewTree: import("svelte").Component<JsonTreeViewTreeProps, {}, "">;
+type JsonTreeViewTree = ReturnType<typeof JsonTreeViewTree>;
+export default JsonTreeViewTree;

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { JsonNodeHastElement } from '@zag-js/json-tree-utils'
+  import JsonTreeViewValueNode from './json-tree-view-value-node.svelte'
+  import type { Snippet } from 'svelte'
+
+  interface JsonTreeViewValueNodeProps {
+    node: JsonNodeHastElement
+    renderValue?: Snippet<[JsonNodeHastElement]>
+  }
+
+  let { node, renderValue }: JsonTreeViewValueNodeProps = $props()
+</script>
+
+{#if node.type === 'text'}
+  {#if renderValue}
+    {@render renderValue(node)}
+  {:else}
+    {node.value}
+  {/if}
+{:else}
+  <svelte:element
+    this={node.tagName}
+    data-root={node.properties.root ? '' : undefined}
+    data-type={node.properties.nodeType}
+    data-kind={node.properties.kind}
+  >
+    {#each node.children as child, index (index)}
+      <JsonTreeViewValueNode node={child} {renderValue} />
+    {/each}
+  </svelte:element>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { JsonNodeHastElement } from '@zag-js/json-tree-utils';
+import JsonTreeViewValueNode from './json-tree-view-value-node.svelte';
+import type { Snippet } from 'svelte';
+interface JsonTreeViewValueNodeProps {
+    node: JsonNodeHastElement;
+    renderValue?: Snippet<[JsonNodeHastElement]>;
+}
+declare const JsonTreeViewValueNode: import("svelte").Component<JsonTreeViewValueNodeProps, {}, "">;
+type JsonTreeViewValueNode = ReturnType<typeof JsonTreeViewValueNode>;
+export default JsonTreeViewValueNode;

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

@@ -0,0 +1,3 @@
+export { default as Root, type JsonTreeViewRootBaseProps as RootBaseProps, type JsonTreeViewRootProps as RootProps, } from './json-tree-view-root.svelte';
+export { default as RootProvider, type JsonTreeViewRootProviderProps as RootProviderProps, } from './json-tree-view-root-provider.svelte';
+export { default as Tree, type JsonTreeViewTreeBaseProps as TreeBaseProps, type JsonTreeViewTreeProps as TreeProps, } from './json-tree-view-tree.svelte';

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

@@ -0,0 +1,3 @@
+export { default as Root, } from './json-tree-view-root.svelte';
+export { default as RootProvider, } from './json-tree-view-root-provider.svelte';
+export { default as Tree, } from './json-tree-view-tree.svelte';

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

@@ -0,0 +1,10 @@
+import { type JsonNode } from '@zag-js/json-tree-utils';
+import type { MaybeFunction } from '@zag-js/utils';
+import { type UseTreeViewProps, type UseTreeViewReturn } from '../tree-view';
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'> {
+    data: unknown;
+    defaultExpandedDepth?: number;
+}
+export interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {
+}
+export declare const useJsonTreeView: (props: MaybeFunction<UseJsonTreeViewProps>) => UseJsonTreeViewReturn;

package/dist/components/json-tree-view/use-json-tree-view.svelte.js

@@ -0,0 +1,23 @@
+import { runIfFn } from '../../utils/run-if-fn';
+import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
+import { untrack } from 'svelte';
+import { createTreeCollection, useTreeView } from '../tree-view';
+import { getBranchValues } from './get-branch-value';
+export const useJsonTreeView = (props) => {
+    const machineProps = $derived.by(() => {
+        const { data, defaultExpandedDepth, ...restProps } = runIfFn(props);
+        const collection = createTreeCollection({
+            nodeToValue,
+            nodeToString,
+            rootNode: getRootNode(data),
+        });
+        const defaultExpandedValue = untrack(() => defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : undefined);
+        return {
+            collection,
+            defaultExpandedValue,
+            ...restProps,
+            typeahead: false,
+        };
+    });
+    return useTreeView(() => machineProps);
+};

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

@@ -4,10 +4,17 @@ export interface ListboxContextProps<T extends CollectionItem> {
     render: Snippet<[UseListboxContext<T>]>;
 }
 import type { UseListboxContext } from './use-listbox-context.js';
+declare function $$render<T extends CollectionItem>(): {
+    props: ListboxContextProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ListboxContextProps<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/listbox/listbox-root-provider.svelte.d.ts

@@ -8,10 +8,17 @@ export interface ListboxRootProviderProps<T extends CollectionItem> extends Assi
 import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
 import type { CollectionItem } from '../collection/index.js';
 import type { UseListboxReturn } from './use-listbox.svelte.js';
+declare function $$render<T extends CollectionItem>(): {
+    props: ListboxRootProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ListboxRootProviderProps<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/listbox/listbox-root.svelte.d.ts

@@ -5,10 +5,17 @@ export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListb
 }
 export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
 }
+declare function $$render<T extends CollectionItem>(): {
+    props: ListboxRootProps<T>;
+    exports: {};
+    bindings: "value" | "highlightedValue";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem> {
-    props(): ListboxRootProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "value" | "highlightedValue";
     exports(): {};
 }

package/dist/components/portal/portal.svelte

@@ -1,5 +1,5 @@
-<script module lang="ts">
-  import type { Snippet } from 'svelte'
+<script lang="ts">
+  import { type Snippet, getAllContexts, mount, tick, unmount } from 'svelte'
 
   export interface PortalProps {
     /**
@@ -15,42 +15,30 @@
      */
     children: Snippet
   }
-</script>
 
-<script lang="ts">
-  /**
-   * @see https://github.com/sveltejs/svelte/issues/7082
-   */
-  import { getAllContexts, mount, unmount } from 'svelte'
-  import PortalConsumer from './portal-consumer.svelte'
-
-  const { container = globalThis?.document?.body, children, disabled = false }: PortalProps = $props()
+  let { children, container = globalThis.document?.body, disabled = false }: PortalProps = $props()
 
   const context = getAllContexts()
 
-  let instance: ReturnType<typeof mount> | null = null
-
-  const unmountInstance = () => {
-    if (instance) {
-      unmount(instance)
-      instance = null
+  let instance: any = null
+  $effect(() => {
+    const cleanup = () => {
+      if (instance) {
+        void unmount(instance)
+        instance = null
+      }
     }
-  }
 
-  $effect(() => {
-    if (disabled || !container) {
-      unmountInstance()
+    if (disabled) {
+      cleanup()
       return
     }
 
-    instance = mount(PortalConsumer, {
-      target: container,
-      props: { children },
-      context,
+    tick().then(() => {
+      instance = mount(children, { target: container, context })
     })
-
     return () => {
-      unmountInstance()
+      cleanup()
     }
   })
 </script>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 export interface PortalProps {
     /**
      * If true, the portal will not be rendered.

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

@@ -4,10 +4,17 @@ import type { UseSelectReturn } from './use-select.svelte';
 export interface SelectContextProps<T extends CollectionItem = CollectionItem> {
     render: Snippet<[UseSelectReturn<T>]>;
 }
+declare function $$render<T extends CollectionItem = CollectionItem>(): {
+    props: SelectContextProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem = CollectionItem> {
-    props(): SelectContextProps<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/select/select-item.svelte.d.ts

@@ -6,10 +6,17 @@ export interface SelectItemBaseProps<T extends CollectionItem = CollectionItem>
 }
 export interface SelectItemProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectItemBaseProps<T>> {
 }
+declare function $$render<T extends CollectionItem = CollectionItem>(): {
+    props: SelectItemProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem = CollectionItem> {
-    props(): SelectItemProps<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/select/select-root-provider.svelte.d.ts

@@ -7,10 +7,17 @@ export interface SelectRootProviderBaseProps<T extends CollectionItem = Collecti
 export interface SelectRootProviderProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootProviderBaseProps<T>> {
 }
 import { type UsePresenceProps } from '../presence';
+declare function $$render<T extends CollectionItem = CollectionItem>(): {
+    props: SelectRootProviderProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem = CollectionItem> {
-    props(): SelectRootProviderProps<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/select/select-root.svelte.d.ts

@@ -6,10 +6,17 @@ export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem>
 export interface SelectRootProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {
 }
 import { type UsePresenceProps } from '../presence';
+declare function $$render<T extends CollectionItem = CollectionItem>(): {
+    props: SelectRootProps<T>;
+    exports: {};
+    bindings: "ref" | "value";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends CollectionItem = CollectionItem> {
-    props(): SelectRootProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref" | "value";
     exports(): {};
 }

package/dist/components/signature-pad/signature-pad-root.svelte

@@ -13,30 +13,37 @@
   import { useSignaturePad } from './use-signature-pad.svelte'
   import { SignaturePadProvider } from './use-signature-pad-context'
 
-  let { ref = $bindable(null), ...props }: SignaturePadRootProps = $props()
+  let { ref = $bindable(null), paths = $bindable(), ...props }: SignaturePadRootProps = $props()
   const providedId = $props.id()
 
   const [useSignaturePadProps, localProps] = $derived(
     createSplitProps<UseSignaturePadProps>()(props, [
       'id',
       'ids',
+      'defaultPaths',
       'drawing',
       'disabled',
       'readOnly',
       'name',
       'onDraw',
       'onDrawEnd',
+      'paths',
       'required',
       'translations',
     ]),
   )
 
-  const resolvedProps = $derived<UseSignaturePadProps>({
+  const machineProps = $derived<UseSignaturePadProps>({
     ...useSignaturePadProps,
     id: useSignaturePadProps.id ?? providedId,
+    paths,
+    onDraw: (details) => {
+      useSignaturePadProps.onDraw?.(details)
+      if (paths !== undefined) paths = details.paths
+    },
   })
 
-  const signaturePad = useSignaturePad(() => resolvedProps)
+  const signaturePad = useSignaturePad(() => machineProps)
   const mergedProps = $derived(mergeProps(signaturePad().getRootProps(), localProps))
 
   SignaturePadProvider(signaturePad)

package/dist/components/signature-pad/signature-pad-root.svelte.d.ts

@@ -4,6 +4,6 @@ export interface SignaturePadRootBaseProps extends UseSignaturePadProps, Polymor
 }
 export interface SignaturePadRootProps extends Assign<HTMLProps<'div'>, SignaturePadRootBaseProps> {
 }
-declare const SignaturePadRoot: import("svelte").Component<SignaturePadRootProps, {}, "ref">;
+declare const SignaturePadRoot: import("svelte").Component<SignaturePadRootProps, {}, "ref" | "paths">;
 type SignaturePadRoot = ReturnType<typeof SignaturePadRoot>;
 export default SignaturePadRoot;

package/dist/components/tour/tour.anatomy.d.ts

@@ -1 +1 @@
-export declare const tourAnatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "control" | "positioner" | "description" | "actionTrigger" | "closeTrigger" | "progressText" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const tourAnatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "control" | "positioner" | "description" | "arrow" | "actionTrigger" | "closeTrigger" | "progressText" | "arrowTip" | "backdrop" | "spotlight">;

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

@@ -4,10 +4,17 @@ import type { TreeNode } from '@zag-js/collection';
 export interface TreeViewNodeContextProps {
     render: Snippet<[UseTreeViewNodeContext]>;
 }
+declare function $$render<T extends TreeNode>(): {
+    props: TreeViewNodeContextProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends TreeNode> {
-    props(): TreeViewNodeContextProps;
-    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/tree-view/tree-view-node-provider.svelte.d.ts

@@ -8,10 +8,17 @@ export interface TreeViewNodeProviderProps<T extends TreeNode> extends TreeViewN
     children?: Snippet;
 }
 import { TreeViewNodeProvider } from './use-tree-view-node-context';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeViewNodeProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends TreeNode> {
-    props(): TreeViewNodeProviderProps<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/tree-view/tree-view-root-provider.svelte.d.ts

@@ -7,10 +7,17 @@ export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends Rende
 export interface TreeViewRootProviderProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {
 }
 import { type RenderStrategyProps } from '../../utils/render-strategy';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeViewRootProviderProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends TreeNode> {
-    props(): TreeViewRootProviderProps<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/tree-view/tree-view-root.svelte.d.ts

@@ -6,10 +6,17 @@ export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewPr
 export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {
 }
 import { type RenderStrategyProps } from '../../utils/render-strategy';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeViewRootProps<T>;
+    exports: {};
+    bindings: "ref" | "focusedValue" | "expandedValue" | "selectedValue" | "checkedValue";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends TreeNode> {
-    props(): TreeViewRootProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref" | "focusedValue" | "expandedValue" | "selectedValue" | "checkedValue";
     exports(): {};
 }

package/dist/components/tree-view/tree-view-split-props.d.ts

@@ -1,3 +1,3 @@
 import type { TreeNode } from '../collection';
 import type { UseTreeViewProps } from './use-tree-view.svelte';
-export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "onCheckedChange" | "collection" | "focusedValue" | "defaultFocusedValue" | "selectionMode" | "typeahead" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "defaultCheckedValue" | "checkedValue" | "onExpandedChange" | "onSelectionChange" | "onLoadChildrenComplete" | "onLoadChildrenError" | "expandOnClick" | "loadChildren">];
+export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "onCheckedChange" | "collection" | "selectionMode" | "focusedValue" | "defaultFocusedValue" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "defaultCheckedValue" | "checkedValue" | "onExpandedChange" | "onSelectionChange" | "onLoadChildrenComplete" | "onLoadChildrenError" | "expandOnClick" | "typeahead" | "loadChildren">];