@ark-ui/svelte 5.1.1 → 5.3.0

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import {
+    type JsonNode,
+    type JsonNodeHastElement,
+    getAccessibleDescription,
+    jsonNodeToElement,
+    keyPathToKey,
+  } from '@zag-js/json-tree-utils'
+  import type { Snippet } from 'svelte'
+  import { TreeView, useTreeViewContext } from '../tree-view'
+  import JsonTreeViewKeyNode from './json-tree-view-key-node.svelte'
+  import JsonTreeViewNode from './json-tree-view-node.svelte'
+  import { useJsonTreeViewPropsContext } from './json-tree-view-props-context'
+  import JsonTreeViewValueNode from './json-tree-view-value-node.svelte'
+
+  export interface JsonTreeViewNodeBaseProps {
+    /**
+     * The icon to use for the arrow.
+     */
+    arrow?: Snippet<[]>
+    /**
+     * The indent guide to use for the tree.
+     */
+    indentGuide?: boolean | Snippet<[]>
+    /**
+     * The function to render the value of the node.
+     */
+    renderValue?: Snippet<[JsonNodeHastElement]>
+  }
+
+  export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode
+    indexPath: number[]
+  }
+
+  const props: JsonTreeViewNodeProps = $props()
+
+  const { node, indexPath, arrow, indentGuide, renderValue } = props
+
+  const options = useJsonTreeViewPropsContext()
+
+  const tree = useTreeViewContext()
+  const nodeState = $derived(tree().getNodeState({ node, indexPath }))
+
+  const key = $derived(keyPathToKey(node.keyPath, { excludeRoot: true }))
+  const valueNode = $derived(jsonNodeToElement(node, options()))
+
+  const nodeProps = $derived.by(() => {
+    const desc = getAccessibleDescription(node)
+    const line = indexPath.reduce((acc, curr) => acc + curr, 1)
+    const lineLength = indexPath.length - 1
+
+    return {
+      'aria-label': desc,
+      'data-line': line,
+      style: `--line-length: ${lineLength}`,
+    }
+  })
+
+  const scopeProps = {
+    'data-scope': 'json-tree-view',
+  }
+</script>
+
+<TreeView.NodeProvider {node} {indexPath}>
+  {#if nodeState.isBranch}
+    <TreeView.Branch {...scopeProps}>
+      <TreeView.BranchControl {...nodeProps} {...scopeProps}>
+        {#if arrow}
+          <TreeView.BranchIndicator {...scopeProps}>
+            {@render arrow()}
+          </TreeView.BranchIndicator>
+        {/if}
+        <TreeView.BranchText {...scopeProps}>
+          {#if key}
+            <JsonTreeViewKeyNode {node} showQuotes={options().quotesOnKeys} />
+          {/if}
+          <JsonTreeViewValueNode node={valueNode} {renderValue} />
+        </TreeView.BranchText>
+      </TreeView.BranchControl>
+      <TreeView.BranchContent {...scopeProps}>
+        {#if typeof indentGuide === 'boolean'}
+          <TreeView.BranchIndentGuide />
+        {:else if indentGuide}
+          {@render indentGuide()}
+        {/if}
+        {#each node.children ?? [] as child, index (index)}
+          <JsonTreeViewNode {...props} node={child} indexPath={[...indexPath, index]} />
+        {/each}
+      </TreeView.BranchContent>
+    </TreeView.Branch>
+  {:else}
+    <TreeView.Item {...nodeProps} {...scopeProps}>
+      <TreeView.ItemText {...scopeProps}>
+        {#if key}
+          <JsonTreeViewKeyNode {node} showQuotes={options().quotesOnKeys} />
+        {/if}
+        <JsonTreeViewValueNode node={valueNode} {renderValue} />
+      </TreeView.ItemText>
+    </TreeView.Item>
+  {/if}
+</TreeView.NodeProvider>

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

@@ -0,0 +1,24 @@
+import { type JsonNode, type JsonNodeHastElement } from '@zag-js/json-tree-utils';
+import type { Snippet } from 'svelte';
+import JsonTreeViewNode from './json-tree-view-node.svelte';
+export interface JsonTreeViewNodeBaseProps {
+    /**
+     * The icon to use for the arrow.
+     */
+    arrow?: Snippet<[]>;
+    /**
+     * The indent guide to use for the tree.
+     */
+    indentGuide?: boolean | Snippet<[]>;
+    /**
+     * The function to render the value of the node.
+     */
+    renderValue?: Snippet<[JsonNodeHastElement]>;
+}
+export interface JsonTreeViewNodeProps extends JsonTreeViewNodeBaseProps {
+    node: JsonNode;
+    indexPath: number[];
+}
+declare const JsonTreeViewNode: import("svelte").Component<JsonTreeViewNodeProps, {}, "">;
+type JsonTreeViewNode = ReturnType<typeof JsonTreeViewNode>;
+export default JsonTreeViewNode;

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

@@ -0,0 +1,8 @@
+import type { JsonNodePreviewOptions } from '@zag-js/json-tree-utils';
+export interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+    /**
+     * Whether to show quotes on the keys.
+     */
+    quotesOnKeys?: boolean;
+}
+export declare const JsonTreeViewPropsProvider: (opts: () => JsonTreeViewOptions) => void, useJsonTreeViewPropsContext: (fallback?: (() => JsonTreeViewOptions) | undefined) => () => JsonTreeViewOptions;

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

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext({
+    name: 'JsonTreeViewPropsContext',
+    hookName: 'useJsonTreeViewPropsContext',
+    providerName: '<JsonTreeViewPropsProvider />',
+});

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { JsonNode } from '@zag-js/json-tree-utils'
+  import { TreeViewRootProvider, type TreeViewRootProviderProps } from '../tree-view'
+
+  export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
+
+  const props: JsonTreeViewRootProviderProps = $props()
+</script>
+
+<TreeViewRootProvider data-scope="json-tree-view" {...props}>
+  {@render props.children?.()}
+</TreeViewRootProvider>

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

@@ -0,0 +1,7 @@
+import type { JsonNode } from '@zag-js/json-tree-utils';
+import { type TreeViewRootProviderProps } from '../tree-view';
+export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {
+}
+declare const JsonTreeViewRootProvider: import("svelte").Component<JsonTreeViewRootProviderProps, {}, "">;
+type JsonTreeViewRootProvider = ReturnType<typeof JsonTreeViewRootProvider>;
+export default JsonTreeViewRootProvider;

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { type JsonNode, getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { TreeView, createTreeCollection, type TreeViewRootProps } from '../tree-view'
+  import { getBranchValues } from './get-branch-value'
+  import { type JsonTreeViewOptions, JsonTreeViewPropsProvider } 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 {}
+
+  const { data, defaultExpandedDepth, ...props }: JsonTreeViewRootProps = $props()
+
+  const splitJsonTreeViewProps = createSplitProps<JsonTreeViewOptions>()
+
+  const [jsonTreeProps, localProps] = $derived(
+    splitJsonTreeViewProps(props, [
+      'maxPreviewItems',
+      'collapseStringsAfterLength',
+      'quotesOnKeys',
+      'groupArraysAfterLength',
+      'showNonenumerable',
+    ]),
+  )
+
+  const collection = $derived(
+    createTreeCollection<JsonNode>({
+      nodeToValue,
+      nodeToString,
+      rootNode: getRootNode(data),
+    }),
+  )
+
+  const defaultExpandedValue = $derived(
+    defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : undefined,
+  )
+
+  JsonTreeViewPropsProvider(() => jsonTreeProps)
+</script>
+
+<TreeView.Root data-scope="json-tree-view" {collection} {defaultExpandedValue} {...localProps}>
+  {@render props.children?.()}
+</TreeView.Root>

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,7 +1,18 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
+
   export interface PortalProps {
+    /**
+     * If true, the portal will not be rendered.
+     */
+    disabled?: boolean
+    /**
+     * The container to render the portal into.
+     */
     container?: HTMLElement
+    /**
+     * The children to render in the portal.
+     */
     children: Snippet
   }
 </script>
@@ -13,13 +24,37 @@
   import { getAllContexts, mount, unmount } from 'svelte'
   import PortalConsumer from './portal-consumer.svelte'
 
-  const { container = globalThis?.document?.body, children }: PortalProps = $props()
+  const { container = globalThis?.document?.body, children, disabled = false }: PortalProps = $props()
 
   const context = getAllContexts()
 
+  let instance: ReturnType<typeof mount> | null = null
+
+  const unmountInstance = () => {
+    if (instance) {
+      unmount(instance)
+      instance = null
+    }
+  }
+
   $effect(() => {
-    mount(PortalConsumer, { target: container, props: { children }, context })
+    if (disabled || !container) {
+      unmountInstance()
+      return
+    }
+
+    instance = mount(PortalConsumer, {
+      target: container,
+      props: { children },
+      context,
+    })
 
-    return () => unmount(PortalConsumer)
+    return () => {
+      unmountInstance()
+    }
   })
 </script>
+
+{#if disabled}
+  {@render children?.()}
+{/if}

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

@@ -1,6 +1,16 @@
 import type { Snippet } from 'svelte';
 export interface PortalProps {
+    /**
+     * If true, the portal will not be rendered.
+     */
+    disabled?: boolean;
+    /**
+     * The container to render the portal into.
+     */
     container?: HTMLElement;
+    /**
+     * The children to render in the portal.
+     */
     children: Snippet;
 }
 declare const Portal: import("svelte").Component<PortalProps, {}, "">;

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" | "arrow" | "description" | "actionTrigger" | "closeTrigger" | "progressText" | "arrowTip" | "backdrop" | "spotlight">;