ui-ingredients 0.12.0 → 0.14.0

package/dist/tree-view/tree-view-branch-content.svelte

@@ -12,8 +12,8 @@
   import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {
-    getTreeViewBranchPropsContext,
     getTreeViewContext,
+    getTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -24,21 +24,20 @@
   }: TreeViewBranchContentProps = $props();
 
   let treeView = getTreeViewContext();
-
-  let branchProps = getTreeViewBranchPropsContext();
-  let branchState = $derived(treeView.getBranchState(branchProps));
+  let nodeProps = getTreeViewNodePropsContext();
+  let nodeState = $derived(treeView.getNodeState(nodeProps));
 
   let presenceStrategyProps = getPresenceStrategyPropsContext();
   let presence = createPresence(
     reflect(() => ({
-      present: branchState.expanded,
       ...presenceStrategyProps,
+      present: nodeState.expanded,
     })),
   );
 
   let mergedProps = $derived(
     mergeProps(
-      treeView.getBranchContentProps(branchProps),
+      treeView.getBranchContentProps(nodeProps),
       presence.getPresenceProps(),
       props,
     ),
@@ -49,7 +48,7 @@
   {#if asChild}
     {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/tree-view/tree-view-branch-control.svelte

@@ -8,8 +8,8 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    getTreeViewBranchPropsContext,
     getTreeViewContext,
+    getTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -20,11 +20,9 @@
   }: TreeViewBranchControlProps = $props();
 
   let treeView = getTreeViewContext();
-
-  let branchProps = getTreeViewBranchPropsContext();
-
+  let nodeProps = getTreeViewNodePropsContext();
   let mergedProps = $derived(
-    mergeProps(treeView.getBranchControlProps(branchProps), props),
+    mergeProps(treeView.getBranchControlProps(nodeProps), props),
   );
 </script>
 

package/dist/tree-view/tree-view-branch-indent-guide.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TreeViewBranchIndentGuideProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getTreeViewContext,
+    getTreeViewNodePropsContext,
+  } from './tree-view-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TreeViewBranchIndentGuideProps = $props();
+
+  let treeView = getTreeViewContext();
+  let nodeProps = getTreeViewNodePropsContext();
+  let mergedProps = $derived(
+    mergeProps(treeView.getBranchIndentGuideProps(nodeProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tree-view/tree-view-branch-indent-guide.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TreeViewBranchIndentGuideProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TreeViewBranchIndentGuide: $$__sveltets_2_IsomorphicComponent<TreeViewBranchIndentGuideProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type TreeViewBranchIndentGuide = InstanceType<typeof TreeViewBranchIndentGuide>;
+export default TreeViewBranchIndentGuide;

package/dist/tree-view/tree-view-branch-indicator.svelte

@@ -2,14 +2,14 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TreeViewBranchIndicatorProps
-    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    getTreeViewBranchPropsContext,
     getTreeViewContext,
+    getTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -20,18 +20,16 @@
   }: TreeViewBranchIndicatorProps = $props();
 
   let treeView = getTreeViewContext();
-
-  let branchProps = getTreeViewBranchPropsContext();
-
+  let nodeProps = getTreeViewNodePropsContext();
   let mergedProps = $derived(
-    mergeProps(treeView.getBranchIndicatorProps(branchProps), props),
+    mergeProps(treeView.getBranchIndicatorProps(nodeProps), props),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={ref} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
-  </span>
+  </div>
 {/if}

package/dist/tree-view/tree-view-branch-indicator.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface TreeViewBranchIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+export interface TreeViewBranchIndicatorProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tree-view/tree-view-branch-text.svelte

@@ -8,8 +8,8 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    getTreeViewBranchPropsContext,
     getTreeViewContext,
+    getTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -20,11 +20,9 @@
   }: TreeViewBranchTextProps = $props();
 
   let treeView = getTreeViewContext();
-
-  let branchProps = getTreeViewBranchPropsContext();
-
+  let nodeProps = getTreeViewNodePropsContext();
   let mergedProps = $derived(
-    mergeProps(treeView.getBranchTextProps(branchProps), props),
+    mergeProps(treeView.getBranchTextProps(nodeProps), props),
   );
 </script>
 

package/dist/tree-view/tree-view-branch-trigger.svelte

@@ -8,8 +8,8 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    getTreeViewBranchPropsContext,
     getTreeViewContext,
+    getTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -20,11 +20,9 @@
   }: TreeViewBranchTriggerProps = $props();
 
   let treeView = getTreeViewContext();
-
-  let branchProps = getTreeViewBranchPropsContext();
-
+  let nodeProps = getTreeViewNodePropsContext();
   let mergedProps = $derived(
-    mergeProps(treeView.getBranchTriggerProps(branchProps), props),
+    mergeProps(treeView.getBranchTriggerProps(nodeProps), props),
   );
 </script>
 

package/dist/tree-view/tree-view-branch.svelte

@@ -1,22 +1,20 @@
 <script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {BranchProps, BranchState} from '@zag-js/tree-view';
+  import type {NodeProps, NodeState} from '@zag-js/tree-view';
 
   export interface TreeViewBranchProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, BranchState>,
-      Omit<BranchProps, 'depth'>
+      HtmlIngredientProps<'div', HTMLDivElement, NodeState>,
+      NodeProps
     > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
-    getTreeViewTreePropsContext,
-    setTreeViewBranchPropsContext,
+    setTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -27,30 +25,23 @@
   }: TreeViewBranchProps = $props();
 
   let treeView = getTreeViewContext();
-  let treeViewProps = getTreeViewTreePropsContext();
 
-  let [branchPartialProps, localProps] = $derived(
-    createSplitProps<Omit<BranchProps, 'depth'>>(['value', 'disabled'])(props),
+  let [nodeProps, localProps] = $derived(
+    createSplitProps<NodeProps>(['node', 'indexPath'])(props),
   );
 
-  let branchProps = reflect(() => ({
-    ...branchPartialProps,
-    ...treeViewProps,
-  }));
-
-  let branchState = $derived(treeView.getBranchState(branchProps));
-
+  let nodeState = $derived(treeView.getNodeState(nodeProps));
   let mergedProps = $derived(
-    mergeProps(treeView.getBranchProps(branchProps), localProps),
+    mergeProps(treeView.getBranchProps(nodeProps), localProps),
   );
 
-  setTreeViewBranchPropsContext(() => branchProps);
+  setTreeViewNodePropsContext(() => nodeProps);
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps, branchState)}
+  {@render asChild(mergedProps, nodeState)}
 {:else}
   <div bind:this={ref} {...mergedProps}>
-    {@render children?.(branchState)}
+    {@render children?.(nodeState)}
   </div>
 {/if}

package/dist/tree-view/tree-view-branch.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { BranchProps, BranchState } from '@zag-js/tree-view';
-export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, BranchState>, Omit<BranchProps, 'depth'>> {
+import type { NodeProps, NodeState } from '@zag-js/tree-view';
+export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, NodeState>, NodeProps> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -1,12 +1,4 @@
-import type { BranchProps, ItemProps } from '@zag-js/tree-view';
+import type { NodeProps } from '@zag-js/tree-view';
 import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
 export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => void;
-export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
-export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => void;
-export declare const getTreeViewTreePropsContext: () => {
-    depth: number;
-}, setTreeViewTreePropsContext: (context: {
-    depth: number;
-} | (() => {
-    depth: number;
-})) => void;
+export declare const getTreeViewNodePropsContext: () => NodeProps, setTreeViewNodePropsContext: (context: NodeProps | (() => NodeProps)) => void;

package/dist/tree-view/tree-view-context.svelte.js

@@ -1,5 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getTreeViewContext, setTreeViewContext] = createContext('TreeView');
-export const [getTreeViewItemPropsContext, setTreeViewItemPropsContext] = createContext('TreeViewItem [PROPS]');
-export const [getTreeViewBranchPropsContext, setTreeViewBranchPropsContext] = createContext('TreeViewBranch [PROPS]');
-export const [getTreeViewTreePropsContext, setTreeViewTreePropsContext] = createContext('TreeViewTree [PROPS]');
+export const [getTreeViewNodePropsContext, setTreeViewNodePropsContext] = createContext('TreeViewNodeProps');

package/dist/tree-view/tree-view-item-indicator.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {
     getTreeViewContext,
-    getTreeViewItemPropsContext,
+    getTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -20,11 +20,9 @@
   }: TreeViewItemIndicatorProps = $props();
 
   let treeView = getTreeViewContext();
-
-  let itemProps = getTreeViewItemPropsContext();
-
+  let nodeProps = getTreeViewNodePropsContext();
   let mergedProps = $derived(
-    mergeProps(treeView.getItemIndicatorProps(itemProps), props),
+    mergeProps(treeView.getItemIndicatorProps(nodeProps), props),
   );
 </script>
 

package/dist/tree-view/tree-view-item-text.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {
     getTreeViewContext,
-    getTreeViewItemPropsContext,
+    getTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -20,11 +20,9 @@
   }: TreeViewItemTextProps = $props();
 
   let treeView = getTreeViewContext();
-
-  let itemProps = getTreeViewItemPropsContext();
-
+  let nodeProps = getTreeViewNodePropsContext();
   let mergedProps = $derived(
-    mergeProps(treeView.getItemTextProps(itemProps), props),
+    mergeProps(treeView.getItemTextProps(nodeProps), props),
   );
 </script>
 

package/dist/tree-view/tree-view-item.svelte

@@ -1,22 +1,17 @@
 <script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/tree-view';
+  import type {NodeProps} from '@zag-js/tree-view';
 
   export interface TreeViewItemProps
-    extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
-      Omit<ItemProps, 'depth'>
-    > {}
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, NodeProps> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
-    getTreeViewTreePropsContext,
-    setTreeViewItemPropsContext,
+    setTreeViewNodePropsContext,
   } from './tree-view-context.svelte.js';
 
   let {
@@ -27,30 +22,22 @@
   }: TreeViewItemProps = $props();
 
   let treeView = getTreeViewContext();
-  let treeViewProps = getTreeViewTreePropsContext();
 
-  let [itemPartialProps, localProps] = $derived(
-    createSplitProps<Omit<ItemProps, 'depth'>>(['value', 'disabled'])(props),
+  let [nodeProps, localProps] = $derived(
+    createSplitProps<NodeProps>(['node', 'indexPath'])(props),
   );
 
-  let itemProps: ItemProps = reflect(() => ({
-    ...itemPartialProps,
-    ...treeViewProps,
-  }));
-
-  let itemState = $derived(treeView.getItemState(itemProps));
-
   let mergedProps = $derived(
-    mergeProps(treeView.getItemProps(itemProps), localProps),
+    mergeProps(treeView.getItemProps(nodeProps), localProps),
   );
 
-  setTreeViewItemPropsContext(() => itemProps);
+  setTreeViewNodePropsContext(() => nodeProps);
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps, itemState)}
+  {@render asChild(mergedProps)}
 {:else}
   <div bind:this={ref} {...mergedProps}>
-    {@render children?.(itemState)}
+    {@render children?.()}
   </div>
 {/if}

package/dist/tree-view/tree-view-item.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemProps, ItemState } from '@zag-js/tree-view';
-export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, Omit<ItemProps, 'depth'>> {
+import type { NodeProps } from '@zag-js/tree-view';
+export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, NodeProps> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tree-view/tree-view-label.svelte

@@ -17,7 +17,6 @@
   }: TreeViewLabelProps = $props();
 
   let treeView = getTreeViewContext();
-
   let mergedProps = $derived(mergeProps(treeView.getLabelProps(), props));
 </script>
 

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

@@ -40,6 +40,7 @@
       'id',
       'ids',
       'typeahead',
+      'collection',
       'focusedValue',
       'expandedValue',
       'expandOnClick',

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

@@ -2,31 +2,22 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TreeViewTreeProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {
-    depth?: number;
-  }
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {
-    getTreeViewContext,
-    setTreeViewTreePropsContext,
-  } from './tree-view-context.svelte.js';
+  import {getTreeViewContext} from './tree-view-context.svelte.js';
 
   let {
     ref = $bindable(null),
-    depth = 1,
     asChild,
     children,
     ...props
   }: TreeViewTreeProps = $props();
 
   let treeView = getTreeViewContext();
-
   let mergedProps = $derived(mergeProps(treeView.getTreeProps(), props));
-
-  setTreeViewTreePropsContext({depth});
 </script>
 
 {#if asChild}

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

@@ -1,6 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
 export interface TreeViewTreeProps extends HtmlIngredientProps<'div', HTMLDivElement> {
-    depth?: number;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -1,5 +1,7 @@
+export { collection } from '@zag-js/tree-view';
 export { default as BranchContent } from './tree-view-branch-content.svelte';
 export { default as BranchControl } from './tree-view-branch-control.svelte';
+export { default as BranchIndentGuide } from './tree-view-branch-indent-guide.svelte';
 export { default as BranchIndicator } from './tree-view-branch-indicator.svelte';
 export { default as BranchText } from './tree-view-branch-text.svelte';
 export { default as BranchTrigger } from './tree-view-branch-trigger.svelte';

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

@@ -1,5 +1,7 @@
+export { collection } from '@zag-js/tree-view';
 export { default as BranchContent } from './tree-view-branch-content.svelte';
 export { default as BranchControl } from './tree-view-branch-control.svelte';
+export { default as BranchIndentGuide } from './tree-view-branch-indent-guide.svelte';
 export { default as BranchIndicator } from './tree-view-branch-indicator.svelte';
 export { default as BranchText } from './tree-view-branch-text.svelte';
 export { default as BranchTrigger } from './tree-view-branch-trigger.svelte';

package/dist/tree-view/types.d.ts

@@ -0,0 +1,4 @@
+export interface NodeProps<T> {
+    node: T;
+    indexPath: number[];
+}

package/dist/tree-view/types.js

@@ -0,0 +1 @@
+export {};