ui-ingredients 0.11.0 → 0.13.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (127) hide show
  1. package/README.md +1 -1
  2. package/dist/accordion/accordion-item-trigger.svelte +1 -1
  3. package/dist/alert-dialog/alert-dialog-close-trigger.svelte +1 -1
  4. package/dist/alert-dialog/alert-dialog-trigger.svelte +1 -1
  5. package/dist/carousel/carousel-indicator.svelte +1 -1
  6. package/dist/carousel/carousel-next-trigger.svelte +1 -1
  7. package/dist/carousel/carousel-prev-trigger.svelte +1 -1
  8. package/dist/clipboard/clipboard-trigger.svelte +1 -1
  9. package/dist/collapsible/collapsible-trigger.svelte +1 -1
  10. package/dist/color-picker/color-picker-channel-slider-label.svelte +2 -5
  11. package/dist/color-picker/color-picker-channel-slider-label.svelte.d.ts +2 -3
  12. package/dist/color-picker/color-picker-swatch-trigger.svelte +1 -1
  13. package/dist/color-picker/create-color-picker.svelte.d.ts +1 -2
  14. package/dist/color-picker/create-color-picker.svelte.js +0 -1
  15. package/dist/color-picker/index.d.ts +1 -0
  16. package/dist/combobox/combobox-clear-trigger.svelte +1 -1
  17. package/dist/combobox/combobox-root.svelte +6 -10
  18. package/dist/combobox/combobox-root.svelte.d.ts +16 -19
  19. package/dist/combobox/combobox-trigger.svelte +1 -1
  20. package/dist/combobox/combobox.d.ts +1 -0
  21. package/dist/combobox/combobox.js +1 -0
  22. package/dist/combobox/create-combobox.svelte.d.ts +3 -3
  23. package/dist/combobox/create-combobox.svelte.js +1 -10
  24. package/dist/create-context.svelte.d.ts +1 -1
  25. package/dist/date-picker/create-date-picker.svelte.d.ts +1 -5
  26. package/dist/date-picker/create-date-picker.svelte.js +0 -6
  27. package/dist/date-picker/date-picker-clear-trigger.svelte +1 -1
  28. package/dist/date-picker/date-picker-day-table-cell-trigger.svelte +1 -1
  29. package/dist/date-picker/date-picker-month-table-cell-trigger.svelte +1 -1
  30. package/dist/date-picker/date-picker-next-trigger.svelte +1 -1
  31. package/dist/date-picker/date-picker-preset-trigger.svelte +1 -1
  32. package/dist/date-picker/date-picker-prev-trigger.svelte +1 -1
  33. package/dist/date-picker/date-picker-trigger.svelte +1 -1
  34. package/dist/date-picker/date-picker-view-trigger.svelte +1 -1
  35. package/dist/date-picker/date-picker-year-table-cell-trigger.svelte +1 -1
  36. package/dist/date-picker/index.d.ts +1 -0
  37. package/dist/dialog/dialog-close-trigger.svelte +1 -1
  38. package/dist/dialog/dialog-trigger.svelte +1 -1
  39. package/dist/drawer/drawer-close-trigger.svelte +1 -1
  40. package/dist/drawer/drawer-trigger.svelte +1 -1
  41. package/dist/editable/editable-cancel-trigger.svelte +1 -1
  42. package/dist/editable/editable-edit-trigger.svelte +1 -1
  43. package/dist/editable/editable-submit-trigger.svelte +1 -1
  44. package/dist/field/field-textarea.svelte +30 -4
  45. package/dist/field/field-textarea.svelte.d.ts +3 -1
  46. package/dist/file-upload/file-upload-clear-trigger.svelte +1 -1
  47. package/dist/file-upload/file-upload-item-delete-trigger.svelte +1 -1
  48. package/dist/file-upload/file-upload-trigger.svelte +1 -1
  49. package/dist/floating-panel/floating-panel-close-trigger.svelte +1 -1
  50. package/dist/floating-panel/floating-panel-drag-trigger.svelte +1 -1
  51. package/dist/floating-panel/floating-panel-maximize-trigger.svelte +1 -1
  52. package/dist/floating-panel/floating-panel-minimize-trigger.svelte +1 -1
  53. package/dist/floating-panel/floating-panel-resize-trigger.svelte +1 -1
  54. package/dist/floating-panel/floating-panel-restore-trigger.svelte +1 -1
  55. package/dist/floating-panel/floating-panel-trigger.svelte +1 -1
  56. package/dist/menu/menu-context-trigger.svelte +1 -1
  57. package/dist/menu/menu-trigger-item.svelte +1 -1
  58. package/dist/menu/menu-trigger.svelte +1 -1
  59. package/dist/number-input/number-input-decrement-trigger.svelte +1 -1
  60. package/dist/number-input/number-input-increment-trigger.svelte +1 -1
  61. package/dist/pagination/pagination-item.svelte +1 -1
  62. package/dist/pagination/pagination-next-trigger.svelte +1 -1
  63. package/dist/pagination/pagination-prev-trigger.svelte +1 -1
  64. package/dist/pin-input/create-pin-input.svelte.js +1 -0
  65. package/dist/pin-input/pin-input-clear-trigger.svelte +1 -1
  66. package/dist/popover/popover-close-trigger.svelte +1 -1
  67. package/dist/popover/popover-trigger.svelte +1 -1
  68. package/dist/segment-group/create-segment-group.svelte.js +26 -1
  69. package/dist/segment-group/segment-group-indicator.svelte +1 -2
  70. package/dist/segment-group/segment-group-item-control.svelte +1 -6
  71. package/dist/segment-group/segment-group-item-text.svelte +1 -6
  72. package/dist/segment-group/segment-group-item.svelte +1 -6
  73. package/dist/segment-group/segment-group-label.svelte +1 -4
  74. package/dist/segment-group/segment-group-root.svelte +1 -2
  75. package/dist/select/create-select.svelte.d.ts +3 -3
  76. package/dist/select/create-select.svelte.js +1 -10
  77. package/dist/select/select-clear-trigger.svelte +1 -1
  78. package/dist/select/select-root.svelte +6 -9
  79. package/dist/select/select-root.svelte.d.ts +16 -19
  80. package/dist/select/select-trigger.svelte +1 -1
  81. package/dist/select/select.d.ts +1 -0
  82. package/dist/select/select.js +1 -0
  83. package/dist/signature-pad/signature-pad-clear-trigger.svelte +1 -1
  84. package/dist/steps/steps-next-trigger.svelte +1 -1
  85. package/dist/steps/steps-prev-trigger.svelte +1 -1
  86. package/dist/steps/steps-trigger.svelte +1 -1
  87. package/dist/tabs/tabs-trigger.svelte +1 -1
  88. package/dist/tags-input/tags-input-clear-trigger.svelte +1 -1
  89. package/dist/tags-input/tags-input-item-delete-trigger.svelte +1 -1
  90. package/dist/time-picker/index.d.ts +1 -1
  91. package/dist/time-picker/time-picker-clear-trigger.svelte +1 -1
  92. package/dist/time-picker/time-picker-trigger.svelte +1 -1
  93. package/dist/timer/timer-action-trigger.svelte +1 -1
  94. package/dist/toast/create-toaster.svelte.d.ts +3 -17
  95. package/dist/toast/toast-action-trigger.svelte +1 -1
  96. package/dist/toast/toast-close-trigger.svelte +1 -1
  97. package/dist/toggle-group/toggle-group-item.svelte +1 -1
  98. package/dist/tooltip/tooltip-trigger.svelte +1 -1
  99. package/dist/tour/tour-action-trigger.svelte +1 -1
  100. package/dist/tour/tour-close-trigger.svelte +1 -1
  101. package/dist/tour/tour-trigger.svelte +1 -1
  102. package/dist/tree-view/index.d.ts +2 -0
  103. package/dist/tree-view/tree-view-branch-content.svelte +6 -7
  104. package/dist/tree-view/tree-view-branch-control.svelte +3 -5
  105. package/dist/tree-view/tree-view-branch-indent-guide.svelte +35 -0
  106. package/dist/tree-view/tree-view-branch-indent-guide.svelte.d.ts +21 -0
  107. package/dist/tree-view/tree-view-branch-indicator.svelte +6 -8
  108. package/dist/tree-view/tree-view-branch-indicator.svelte.d.ts +1 -1
  109. package/dist/tree-view/tree-view-branch-text.svelte +3 -5
  110. package/dist/tree-view/tree-view-branch-trigger.svelte +3 -5
  111. package/dist/tree-view/tree-view-branch.svelte +11 -20
  112. package/dist/tree-view/tree-view-branch.svelte.d.ts +2 -2
  113. package/dist/tree-view/tree-view-context.svelte.d.ts +2 -10
  114. package/dist/tree-view/tree-view-context.svelte.js +1 -3
  115. package/dist/tree-view/tree-view-item-indicator.svelte +3 -5
  116. package/dist/tree-view/tree-view-item-text.svelte +3 -5
  117. package/dist/tree-view/tree-view-item.svelte +9 -22
  118. package/dist/tree-view/tree-view-item.svelte.d.ts +2 -2
  119. package/dist/tree-view/tree-view-label.svelte +0 -1
  120. package/dist/tree-view/tree-view-root.svelte +1 -0
  121. package/dist/tree-view/tree-view-tree.svelte +2 -11
  122. package/dist/tree-view/tree-view-tree.svelte.d.ts +0 -1
  123. package/dist/tree-view/tree-view.d.ts +2 -0
  124. package/dist/tree-view/tree-view.js +2 -0
  125. package/dist/tree-view/types.d.ts +4 -0
  126. package/dist/tree-view/types.js +1 -0
  127. package/package.json +58 -57
@@ -1,23 +1,9 @@
1
- import type { Machine, StateMachine } from '@zag-js/core';
2
1
  import * as toast from '@zag-js/toast';
3
- export interface CreateToasterProps {
2
+ export interface CreateToasterProps extends Omit<Partial<toast.GroupMachineContext>, 'id'> {
4
3
  id?: string;
5
- max?: toast.GroupMachineContext['max'];
6
- gap?: toast.GroupMachineContext['gap'];
7
- hotkey?: toast.GroupMachineContext['hotkey'];
8
- offsets?: toast.GroupMachineContext['offsets'];
9
- overlap?: toast.GroupMachineContext['overlap'];
10
- duration?: toast.GroupMachineContext['duration'];
11
- placement?: toast.GroupMachineContext['placement'];
12
- removeDelay?: toast.GroupMachineContext['removeDelay'];
13
- pauseOnPageIdle?: toast.GroupMachineContext['pauseOnPageIdle'];
4
+ placement?: toast.Placement;
14
5
  }
15
- type ToasterMachineState = {
16
- value: 'stack' | 'overlap';
17
- };
18
- type ToasterMachine = Machine<toast.GroupMachineContext, ToasterMachineState, StateMachine.AnyEventObject>;
19
6
  export interface CreateToasterReturn extends toast.GroupApi {
20
- machine: ToasterMachine;
7
+ machine: toast.GroupService;
21
8
  }
22
9
  export declare function createToaster(props?: CreateToasterProps): CreateToasterReturn;
23
- export {};
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <button bind:this={ref} type="button" {...mergedProps}>
29
+ <button bind:this={ref} {...mergedProps}>
30
30
  {@render children?.()}
31
31
  </button>
32
32
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -37,7 +37,7 @@
37
37
  {#if asChild}
38
38
  {@render asChild(mergedProps, itemState)}
39
39
  {:else}
40
- <button bind:this={ref} type="button" {...mergedProps}>
40
+ <button bind:this={ref} {...mergedProps}>
41
41
  {@render children?.(itemState)}
42
42
  </button>
43
43
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -29,7 +29,7 @@
29
29
  {#if asChild}
30
30
  {@render asChild(mergedProps)}
31
31
  {:else}
32
- <button bind:this={ref} type="button" {...mergedProps}>
32
+ <button bind:this={ref} {...mergedProps}>
33
33
  {#if children}
34
34
  {@render children?.()}
35
35
  {:else}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -1,6 +1,7 @@
1
1
  export * as TreeView from './tree-view.js';
2
2
  export type { TreeViewBranchContentProps } from './tree-view-branch-content.svelte';
3
3
  export type { TreeViewBranchControlProps } from './tree-view-branch-control.svelte';
4
+ export type { TreeViewBranchIndentGuideProps } from './tree-view-branch-indent-guide.svelte';
4
5
  export type { TreeViewBranchIndicatorProps } from './tree-view-branch-indicator.svelte';
5
6
  export type { TreeViewBranchTextProps } from './tree-view-branch-text.svelte';
6
7
  export type { TreeViewBranchTriggerProps } from './tree-view-branch-trigger.svelte';
@@ -13,3 +14,4 @@ export type { TreeViewProps } from './tree-view-root.svelte';
13
14
  export type { TreeViewTreeProps } from './tree-view-tree.svelte';
14
15
  export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';
15
16
  export { getTreeViewContext } from './tree-view-context.svelte.js';
17
+ export type { NodeProps } from './types.js';
@@ -12,8 +12,8 @@
12
12
  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
13
13
  import {reflect} from '@zag-js/svelte';
14
14
  import {
15
- getTreeViewBranchPropsContext,
16
15
  getTreeViewContext,
16
+ getTreeViewNodePropsContext,
17
17
  } from './tree-view-context.svelte.js';
18
18
 
19
19
  let {
@@ -24,21 +24,20 @@
24
24
  }: TreeViewBranchContentProps = $props();
25
25
 
26
26
  let treeView = getTreeViewContext();
27
-
28
- let branchProps = getTreeViewBranchPropsContext();
29
- let branchState = $derived(treeView.getBranchState(branchProps));
27
+ let nodeProps = getTreeViewNodePropsContext();
28
+ let nodeState = $derived(treeView.getNodeState(nodeProps));
30
29
 
31
30
  let presenceStrategyProps = getPresenceStrategyPropsContext();
32
31
  let presence = createPresence(
33
32
  reflect(() => ({
34
- present: branchState.expanded,
35
33
  ...presenceStrategyProps,
34
+ present: nodeState.expanded,
36
35
  })),
37
36
  );
38
37
 
39
38
  let mergedProps = $derived(
40
39
  mergeProps(
41
- treeView.getBranchContentProps(branchProps),
40
+ treeView.getBranchContentProps(nodeProps),
42
41
  presence.getPresenceProps(),
43
42
  props,
44
43
  ),
@@ -49,7 +48,7 @@
49
48
  {#if asChild}
50
49
  {@render asChild(presence.setReference, mergedProps)}
51
50
  {:else}
52
- <div bind:this={ref} {...mergedProps}>
51
+ <div bind:this={ref} use:presence.setReference {...mergedProps}>
53
52
  {@render children?.()}
54
53
  </div>
55
54
  {/if}
@@ -8,8 +8,8 @@
8
8
  <script lang="ts">
9
9
  import {mergeProps} from '../merge-props.js';
10
10
  import {
11
- getTreeViewBranchPropsContext,
12
11
  getTreeViewContext,
12
+ getTreeViewNodePropsContext,
13
13
  } from './tree-view-context.svelte.js';
14
14
 
15
15
  let {
@@ -20,11 +20,9 @@
20
20
  }: TreeViewBranchControlProps = $props();
21
21
 
22
22
  let treeView = getTreeViewContext();
23
-
24
- let branchProps = getTreeViewBranchPropsContext();
25
-
23
+ let nodeProps = getTreeViewNodePropsContext();
26
24
  let mergedProps = $derived(
27
- mergeProps(treeView.getBranchControlProps(branchProps), props),
25
+ mergeProps(treeView.getBranchControlProps(nodeProps), props),
28
26
  );
29
27
  </script>
30
28
 
@@ -0,0 +1,35 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface TreeViewBranchIndentGuideProps
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {
11
+ getTreeViewContext,
12
+ getTreeViewNodePropsContext,
13
+ } from './tree-view-context.svelte.js';
14
+
15
+ let {
16
+ ref = $bindable(null),
17
+ asChild,
18
+ children,
19
+ ...props
20
+ }: TreeViewBranchIndentGuideProps = $props();
21
+
22
+ let treeView = getTreeViewContext();
23
+ let nodeProps = getTreeViewNodePropsContext();
24
+ let mergedProps = $derived(
25
+ mergeProps(treeView.getBranchIndentGuideProps(nodeProps), props),
26
+ );
27
+ </script>
28
+
29
+ {#if asChild}
30
+ {@render asChild(mergedProps)}
31
+ {:else}
32
+ <div bind:this={ref} {...mergedProps}>
33
+ {@render children?.()}
34
+ </div>
35
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface TreeViewBranchIndentGuideProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const TreeViewBranchIndentGuide: $$__sveltets_2_IsomorphicComponent<TreeViewBranchIndentGuideProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type TreeViewBranchIndentGuide = InstanceType<typeof TreeViewBranchIndentGuide>;
21
+ export default TreeViewBranchIndentGuide;
@@ -2,14 +2,14 @@
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
3
 
4
4
  export interface TreeViewBranchIndicatorProps
5
- extends HtmlIngredientProps<'span', HTMLSpanElement> {}
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
6
  </script>
7
7
 
8
8
  <script lang="ts">
9
9
  import {mergeProps} from '../merge-props.js';
10
10
  import {
11
- getTreeViewBranchPropsContext,
12
11
  getTreeViewContext,
12
+ getTreeViewNodePropsContext,
13
13
  } from './tree-view-context.svelte.js';
14
14
 
15
15
  let {
@@ -20,18 +20,16 @@
20
20
  }: TreeViewBranchIndicatorProps = $props();
21
21
 
22
22
  let treeView = getTreeViewContext();
23
-
24
- let branchProps = getTreeViewBranchPropsContext();
25
-
23
+ let nodeProps = getTreeViewNodePropsContext();
26
24
  let mergedProps = $derived(
27
- mergeProps(treeView.getBranchIndicatorProps(branchProps), props),
25
+ mergeProps(treeView.getBranchIndicatorProps(nodeProps), props),
28
26
  );
29
27
  </script>
30
28
 
31
29
  {#if asChild}
32
30
  {@render asChild(mergedProps)}
33
31
  {:else}
34
- <span bind:this={ref} {...mergedProps}>
32
+ <div bind:this={ref} {...mergedProps}>
35
33
  {@render children?.()}
36
- </span>
34
+ </div>
37
35
  {/if}
@@ -1,5 +1,5 @@
1
1
  import type { HtmlIngredientProps } from '../types.js';
2
- export interface TreeViewBranchIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
2
+ export interface TreeViewBranchIndicatorProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
3
  }
4
4
  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> {
5
5
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -8,8 +8,8 @@
8
8
  <script lang="ts">
9
9
  import {mergeProps} from '../merge-props.js';
10
10
  import {
11
- getTreeViewBranchPropsContext,
12
11
  getTreeViewContext,
12
+ getTreeViewNodePropsContext,
13
13
  } from './tree-view-context.svelte.js';
14
14
 
15
15
  let {
@@ -20,11 +20,9 @@
20
20
  }: TreeViewBranchTextProps = $props();
21
21
 
22
22
  let treeView = getTreeViewContext();
23
-
24
- let branchProps = getTreeViewBranchPropsContext();
25
-
23
+ let nodeProps = getTreeViewNodePropsContext();
26
24
  let mergedProps = $derived(
27
- mergeProps(treeView.getBranchTextProps(branchProps), props),
25
+ mergeProps(treeView.getBranchTextProps(nodeProps), props),
28
26
  );
29
27
  </script>
30
28
 
@@ -8,8 +8,8 @@
8
8
  <script lang="ts">
9
9
  import {mergeProps} from '../merge-props.js';
10
10
  import {
11
- getTreeViewBranchPropsContext,
12
11
  getTreeViewContext,
12
+ getTreeViewNodePropsContext,
13
13
  } from './tree-view-context.svelte.js';
14
14
 
15
15
  let {
@@ -20,11 +20,9 @@
20
20
  }: TreeViewBranchTriggerProps = $props();
21
21
 
22
22
  let treeView = getTreeViewContext();
23
-
24
- let branchProps = getTreeViewBranchPropsContext();
25
-
23
+ let nodeProps = getTreeViewNodePropsContext();
26
24
  let mergedProps = $derived(
27
- mergeProps(treeView.getBranchTriggerProps(branchProps), props),
25
+ mergeProps(treeView.getBranchTriggerProps(nodeProps), props),
28
26
  );
29
27
  </script>
30
28
 
@@ -1,22 +1,20 @@
1
1
  <script lang="ts" module>
2
2
  import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {BranchProps, BranchState} from '@zag-js/tree-view';
3
+ import type {NodeProps, NodeState} from '@zag-js/tree-view';
4
4
 
5
5
  export interface TreeViewBranchProps
6
6
  extends Assign<
7
- HtmlIngredientProps<'div', HTMLDivElement, BranchState>,
8
- Omit<BranchProps, 'depth'>
7
+ HtmlIngredientProps<'div', HTMLDivElement, NodeState>,
8
+ NodeProps
9
9
  > {}
10
10
  </script>
11
11
 
12
12
  <script lang="ts">
13
13
  import {mergeProps} from '../merge-props.js';
14
- import {reflect} from '@zag-js/svelte';
15
14
  import {createSplitProps} from '@zag-js/utils';
16
15
  import {
17
16
  getTreeViewContext,
18
- getTreeViewTreePropsContext,
19
- setTreeViewBranchPropsContext,
17
+ setTreeViewNodePropsContext,
20
18
  } from './tree-view-context.svelte.js';
21
19
 
22
20
  let {
@@ -27,30 +25,23 @@
27
25
  }: TreeViewBranchProps = $props();
28
26
 
29
27
  let treeView = getTreeViewContext();
30
- let treeViewProps = getTreeViewTreePropsContext();
31
28
 
32
- let [branchPartialProps, localProps] = $derived(
33
- createSplitProps<Omit<BranchProps, 'depth'>>(['value', 'disabled'])(props),
29
+ let [nodeProps, localProps] = $derived(
30
+ createSplitProps<NodeProps>(['node', 'indexPath'])(props),
34
31
  );
35
32
 
36
- let branchProps = reflect(() => ({
37
- ...branchPartialProps,
38
- ...treeViewProps,
39
- }));
40
-
41
- let branchState = $derived(treeView.getBranchState(branchProps));
42
-
33
+ let nodeState = $derived(treeView.getNodeState(nodeProps));
43
34
  let mergedProps = $derived(
44
- mergeProps(treeView.getBranchProps(branchProps), localProps),
35
+ mergeProps(treeView.getBranchProps(nodeProps), localProps),
45
36
  );
46
37
 
47
- setTreeViewBranchPropsContext(() => branchProps);
38
+ setTreeViewNodePropsContext(() => nodeProps);
48
39
  </script>
49
40
 
50
41
  {#if asChild}
51
- {@render asChild(mergedProps, branchState)}
42
+ {@render asChild(mergedProps, nodeState)}
52
43
  {:else}
53
44
  <div bind:this={ref} {...mergedProps}>
54
- {@render children?.(branchState)}
45
+ {@render children?.(nodeState)}
55
46
  </div>
56
47
  {/if}
@@ -1,6 +1,6 @@
1
1
  import type { Assign, HtmlIngredientProps } from '../types.js';
2
- import type { BranchProps, BranchState } from '@zag-js/tree-view';
3
- export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, BranchState>, Omit<BranchProps, 'depth'>> {
2
+ import type { NodeProps, NodeState } from '@zag-js/tree-view';
3
+ export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, NodeState>, NodeProps> {
4
4
  }
5
5
  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> {
6
6
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -1,12 +1,4 @@
1
- import type { BranchProps, ItemProps } from '@zag-js/tree-view';
1
+ import type { NodeProps } from '@zag-js/tree-view';
2
2
  import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
3
3
  export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => void;
4
- export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
5
- export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => void;
6
- export declare const getTreeViewTreePropsContext: () => {
7
- depth: number;
8
- }, setTreeViewTreePropsContext: (context: {
9
- depth: number;
10
- } | (() => {
11
- depth: number;
12
- })) => void;
4
+ export declare const getTreeViewNodePropsContext: () => NodeProps, setTreeViewNodePropsContext: (context: NodeProps | (() => NodeProps)) => void;
@@ -1,5 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getTreeViewContext, setTreeViewContext] = createContext('TreeView');
3
- export const [getTreeViewItemPropsContext, setTreeViewItemPropsContext] = createContext('TreeViewItem [PROPS]');
4
- export const [getTreeViewBranchPropsContext, setTreeViewBranchPropsContext] = createContext('TreeViewBranch [PROPS]');
5
- export const [getTreeViewTreePropsContext, setTreeViewTreePropsContext] = createContext('TreeViewTree [PROPS]');
3
+ export const [getTreeViewNodePropsContext, setTreeViewNodePropsContext] = createContext('TreeViewNodeProps');
@@ -9,7 +9,7 @@
9
9
  import {mergeProps} from '../merge-props.js';
10
10
  import {
11
11
  getTreeViewContext,
12
- getTreeViewItemPropsContext,
12
+ getTreeViewNodePropsContext,
13
13
  } from './tree-view-context.svelte.js';
14
14
 
15
15
  let {
@@ -20,11 +20,9 @@
20
20
  }: TreeViewItemIndicatorProps = $props();
21
21
 
22
22
  let treeView = getTreeViewContext();
23
-
24
- let itemProps = getTreeViewItemPropsContext();
25
-
23
+ let nodeProps = getTreeViewNodePropsContext();
26
24
  let mergedProps = $derived(
27
- mergeProps(treeView.getItemIndicatorProps(itemProps), props),
25
+ mergeProps(treeView.getItemIndicatorProps(nodeProps), props),
28
26
  );
29
27
  </script>
30
28
 
@@ -9,7 +9,7 @@
9
9
  import {mergeProps} from '../merge-props.js';
10
10
  import {
11
11
  getTreeViewContext,
12
- getTreeViewItemPropsContext,
12
+ getTreeViewNodePropsContext,
13
13
  } from './tree-view-context.svelte.js';
14
14
 
15
15
  let {
@@ -20,11 +20,9 @@
20
20
  }: TreeViewItemTextProps = $props();
21
21
 
22
22
  let treeView = getTreeViewContext();
23
-
24
- let itemProps = getTreeViewItemPropsContext();
25
-
23
+ let nodeProps = getTreeViewNodePropsContext();
26
24
  let mergedProps = $derived(
27
- mergeProps(treeView.getItemTextProps(itemProps), props),
25
+ mergeProps(treeView.getItemTextProps(nodeProps), props),
28
26
  );
29
27
  </script>
30
28
 
@@ -1,22 +1,17 @@
1
1
  <script lang="ts" module>
2
2
  import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {ItemProps, ItemState} from '@zag-js/tree-view';
3
+ import type {NodeProps} from '@zag-js/tree-view';
4
4
 
5
5
  export interface TreeViewItemProps
6
- extends Assign<
7
- HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
8
- Omit<ItemProps, 'depth'>
9
- > {}
6
+ extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, NodeProps> {}
10
7
  </script>
11
8
 
12
9
  <script lang="ts">
13
10
  import {mergeProps} from '../merge-props.js';
14
- import {reflect} from '@zag-js/svelte';
15
11
  import {createSplitProps} from '@zag-js/utils';
16
12
  import {
17
13
  getTreeViewContext,
18
- getTreeViewTreePropsContext,
19
- setTreeViewItemPropsContext,
14
+ setTreeViewNodePropsContext,
20
15
  } from './tree-view-context.svelte.js';
21
16
 
22
17
  let {
@@ -27,30 +22,22 @@
27
22
  }: TreeViewItemProps = $props();
28
23
 
29
24
  let treeView = getTreeViewContext();
30
- let treeViewProps = getTreeViewTreePropsContext();
31
25
 
32
- let [itemPartialProps, localProps] = $derived(
33
- createSplitProps<Omit<ItemProps, 'depth'>>(['value', 'disabled'])(props),
26
+ let [nodeProps, localProps] = $derived(
27
+ createSplitProps<NodeProps>(['node', 'indexPath'])(props),
34
28
  );
35
29
 
36
- let itemProps: ItemProps = reflect(() => ({
37
- ...itemPartialProps,
38
- ...treeViewProps,
39
- }));
40
-
41
- let itemState = $derived(treeView.getItemState(itemProps));
42
-
43
30
  let mergedProps = $derived(
44
- mergeProps(treeView.getItemProps(itemProps), localProps),
31
+ mergeProps(treeView.getItemProps(nodeProps), localProps),
45
32
  );
46
33
 
47
- setTreeViewItemPropsContext(() => itemProps);
34
+ setTreeViewNodePropsContext(() => nodeProps);
48
35
  </script>
49
36
 
50
37
  {#if asChild}
51
- {@render asChild(mergedProps, itemState)}
38
+ {@render asChild(mergedProps)}
52
39
  {:else}
53
40
  <div bind:this={ref} {...mergedProps}>
54
- {@render children?.(itemState)}
41
+ {@render children?.()}
55
42
  </div>
56
43
  {/if}
@@ -1,6 +1,6 @@
1
1
  import type { Assign, HtmlIngredientProps } from '../types.js';
2
- import type { ItemProps, ItemState } from '@zag-js/tree-view';
3
- export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, Omit<ItemProps, 'depth'>> {
2
+ import type { NodeProps } from '@zag-js/tree-view';
3
+ export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, NodeProps> {
4
4
  }
5
5
  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> {
6
6
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -17,7 +17,6 @@
17
17
  }: TreeViewLabelProps = $props();
18
18
 
19
19
  let treeView = getTreeViewContext();
20
-
21
20
  let mergedProps = $derived(mergeProps(treeView.getLabelProps(), props));
22
21
  </script>
23
22
 
@@ -40,6 +40,7 @@
40
40
  'id',
41
41
  'ids',
42
42
  'typeahead',
43
+ 'collection',
43
44
  'focusedValue',
44
45
  'expandedValue',
45
46
  'expandOnClick',
@@ -2,31 +2,22 @@
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
3
 
4
4
  export interface TreeViewTreeProps
5
- extends HtmlIngredientProps<'div', HTMLDivElement> {
6
- depth?: number;
7
- }
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
8
6
  </script>
9
7
 
10
8
  <script lang="ts">
11
9
  import {mergeProps} from '../merge-props.js';
12
- import {
13
- getTreeViewContext,
14
- setTreeViewTreePropsContext,
15
- } from './tree-view-context.svelte.js';
10
+ import {getTreeViewContext} from './tree-view-context.svelte.js';
16
11
 
17
12
  let {
18
13
  ref = $bindable(null),
19
- depth = 1,
20
14
  asChild,
21
15
  children,
22
16
  ...props
23
17
  }: TreeViewTreeProps = $props();
24
18
 
25
19
  let treeView = getTreeViewContext();
26
-
27
20
  let mergedProps = $derived(mergeProps(treeView.getTreeProps(), props));
28
-
29
- setTreeViewTreePropsContext({depth});
30
21
  </script>
31
22
 
32
23
  {#if asChild}
@@ -1,6 +1,5 @@
1
1
  import type { HtmlIngredientProps } from '../types.js';
2
2
  export interface TreeViewTreeProps extends HtmlIngredientProps<'div', HTMLDivElement> {
3
- depth?: number;
4
3
  }
5
4
  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> {
6
5
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -1,5 +1,7 @@
1
+ export { collection } from '@zag-js/tree-view';
1
2
  export { default as BranchContent } from './tree-view-branch-content.svelte';
2
3
  export { default as BranchControl } from './tree-view-branch-control.svelte';
4
+ export { default as BranchIndentGuide } from './tree-view-branch-indent-guide.svelte';
3
5
  export { default as BranchIndicator } from './tree-view-branch-indicator.svelte';
4
6
  export { default as BranchText } from './tree-view-branch-text.svelte';
5
7
  export { default as BranchTrigger } from './tree-view-branch-trigger.svelte';
@@ -1,5 +1,7 @@
1
+ export { collection } from '@zag-js/tree-view';
1
2
  export { default as BranchContent } from './tree-view-branch-content.svelte';
2
3
  export { default as BranchControl } from './tree-view-branch-control.svelte';
4
+ export { default as BranchIndentGuide } from './tree-view-branch-indent-guide.svelte';
3
5
  export { default as BranchIndicator } from './tree-view-branch-indicator.svelte';
4
6
  export { default as BranchText } from './tree-view-branch-text.svelte';
5
7
  export { default as BranchTrigger } from './tree-view-branch-trigger.svelte';
@@ -0,0 +1,4 @@
1
+ export interface NodeProps<T> {
2
+ node: T;
3
+ indexPath: number[];
4
+ }
@@ -0,0 +1 @@
1
+ export {};