ui-ingredients 0.0.67 → 0.0.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/color-picker/color-picker-value-swatch.svelte +1 -1
  2. package/dist/color-picker/color-picker-value-text.svelte +1 -1
  3. package/dist/color-picker/color-picker-view.svelte +1 -1
  4. package/dist/is-object.d.ts +2 -0
  5. package/dist/{is-pojo.js → is-object.js} +1 -1
  6. package/dist/merge-props.js +2 -2
  7. package/dist/tour/create-tour.svelte.d.ts +6 -1
  8. package/dist/tour/create-tour.svelte.js +25 -3
  9. package/dist/tour/index.d.ts +5 -5
  10. package/dist/tour/index.js +1 -1
  11. package/dist/tour/tour-action-trigger.svelte +39 -0
  12. package/dist/tour/{tour-prev-trigger.svelte.d.ts → tour-action-trigger.svelte.d.ts} +5 -4
  13. package/dist/tour/tour-anatomy.d.ts +2 -0
  14. package/dist/tour/tour-anatomy.js +3 -0
  15. package/dist/tour/tour-arrow-tip.svelte +8 -6
  16. package/dist/tour/tour-arrow.svelte +8 -6
  17. package/dist/tour/{tour-overlay.svelte → tour-backdrop.svelte} +4 -4
  18. package/dist/tour/{tour-overlay.svelte.d.ts → tour-backdrop.svelte.d.ts} +4 -4
  19. package/dist/tour/tour-content.svelte +1 -0
  20. package/dist/tour/tour-description.svelte +5 -1
  21. package/dist/tour/tour-root.svelte +1 -1
  22. package/dist/tour/tour-title.svelte +5 -1
  23. package/dist/tour/{tour-prev-trigger.svelte → tour-trigger.svelte} +3 -3
  24. package/dist/tour/{tour-skip-trigger.svelte.d.ts → tour-trigger.svelte.d.ts} +4 -4
  25. package/dist/tour/tour.d.ts +3 -4
  26. package/dist/tour/tour.js +3 -4
  27. package/dist/tree-view/tree-view-branch-content.svelte +27 -8
  28. package/dist/tree-view/tree-view-branch-content.svelte.d.ts +2 -1
  29. package/dist/tree-view/tree-view-root.svelte +14 -5
  30. package/dist/tree-view/tree-view-root.svelte.d.ts +2 -1
  31. package/package.json +232 -47
  32. package/dist/is-pojo.d.ts +0 -2
  33. package/dist/tour/tour-next-trigger.svelte +0 -30
  34. package/dist/tour/tour-next-trigger.svelte.d.ts +0 -21
  35. package/dist/tour/tour-skip-trigger.svelte +0 -30
@@ -35,7 +35,7 @@
35
35
  {#if asChild}
36
36
  {@render asChild(mergedProps)}
37
37
  {:else}
38
- <div {...mergedProps}>
38
+ <div bind:this={ref} {...mergedProps}>
39
39
  {@render children?.()}
40
40
  </div>
41
41
  {/if}
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <div {...mergedProps}>
29
+ <div bind:this={ref} {...mergedProps}>
30
30
  {#if children}
31
31
  {@render children()}
32
32
  {:else}
@@ -35,7 +35,7 @@
35
35
  {#if asChild}
36
36
  {@render asChild(mergedProps)}
37
37
  {:else}
38
- <div {...mergedProps}>
38
+ <div bind:this={ref} {...mergedProps}>
39
39
  {@render children?.()}
40
40
  </div>
41
41
  {/if}
@@ -0,0 +1,2 @@
1
+ import type { GenericObject } from './types.js';
2
+ export declare function isObject<T extends GenericObject>(value: unknown): value is T;
@@ -1,5 +1,5 @@
1
1
  /* Credits: https://github.com/lodash/lodash/blob/main/src/isPlainObject.ts */
2
- export function isPojo(value) {
2
+ export function isObject(value) {
3
3
  if (value === null) {
4
4
  return false;
5
5
  }
@@ -1,9 +1,9 @@
1
1
  import { mergeProps as fn } from '@zag-js/svelte';
2
- import { isPojo } from './is-pojo.js';
2
+ import { isObject } from './is-object.js';
3
3
  export function mergeProps(...args) {
4
4
  const r = fn(...args);
5
5
  const i = 'style';
6
- if (r[i] && isPojo(r[i])) {
6
+ if (r[i] && isObject(r[i])) {
7
7
  let s = '';
8
8
  for (const k in r[i]) {
9
9
  const v = r[i][k];
@@ -1,7 +1,12 @@
1
1
  import * as tour from '@zag-js/tour';
2
- export interface CreateTourProps extends Omit<tour.Context, 'id' | 'dir' | 'getRootNode'> {
2
+ import type { HTMLButtonAttributes } from 'svelte/elements';
3
+ export interface TourStepDetails extends Omit<tour.StepDetails, 'id'> {
4
+ }
5
+ export interface CreateTourProps extends Omit<tour.Context, 'id' | 'dir' | 'steps' | 'getRootNode'> {
3
6
  id?: string;
7
+ steps?: TourStepDetails[];
4
8
  }
5
9
  export interface CreateTourReturn extends tour.Api<any> {
10
+ getTriggerProps(): HTMLButtonAttributes;
6
11
  }
7
12
  export declare function createTour(props: CreateTourProps): CreateTourReturn;
@@ -3,16 +3,38 @@ import { getLocaleContext } from '../locale-provider/local-provider-context.svel
3
3
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
4
4
  import * as tour from '@zag-js/tour';
5
5
  import { uid } from 'uid';
6
+ import { parts } from './tour-anatomy.js';
6
7
  export function createTour(props) {
7
8
  const locale = getLocaleContext();
8
9
  const environment = getEnvironmentContext();
9
10
  const id = uid();
11
+ const steps = $derived.by(() => {
12
+ return props.steps?.map((step) => ({
13
+ id: uid(),
14
+ ...step,
15
+ }));
16
+ });
10
17
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
18
+ id,
13
19
  dir: locale?.dir,
14
20
  getRootNode: environment?.getRootNode,
21
+ ...props,
22
+ steps,
15
23
  }));
16
24
  const [state, send] = useMachine(tour.machine(context), { context });
17
- return reflect(() => tour.connect(state, send, normalizeProps));
25
+ return reflect(() => {
26
+ const o = tour.connect(state, send, normalizeProps);
27
+ return {
28
+ ...o,
29
+ getTriggerProps() {
30
+ return {
31
+ onclick() {
32
+ o.start();
33
+ },
34
+ 'data-state': o.open ? 'open' : 'closed',
35
+ ...parts.trigger.attrs,
36
+ };
37
+ },
38
+ };
39
+ });
18
40
  }
@@ -1,17 +1,17 @@
1
1
  export * as Tour from './tour.js';
2
+ export type { TourActionTriggerProps } from './tour-action-trigger.svelte';
2
3
  export type { TourArrowTipProps } from './tour-arrow-tip.svelte';
3
4
  export type { TourArrowProps } from './tour-arrow.svelte';
5
+ export type { TourBackdropProps } from './tour-backdrop.svelte';
4
6
  export type { TourCloseTriggerProps } from './tour-close-trigger.svelte';
5
7
  export type { TourContentProps } from './tour-content.svelte';
6
8
  export type { TourDescriptionProps } from './tour-description.svelte';
7
- export type { TourNextTriggerProps } from './tour-next-trigger.svelte';
8
- export type { TourOverlayProps } from './tour-overlay.svelte';
9
9
  export type { TourPositionerProps } from './tour-positioner.svelte';
10
- export type { TourPrevTriggerProps } from './tour-prev-trigger.svelte';
11
10
  export type { TourProgressTextProps } from './tour-progress-text.svelte';
12
11
  export type { TourProps } from './tour-root.svelte';
13
- export type { TourSkipTriggerProps } from './tour-skip-trigger.svelte';
14
12
  export type { TourSpotlightProps } from './tour-spotlight.svelte';
15
13
  export type { TourTitleProps } from './tour-title.svelte';
16
- export { anatomy as tourAnatomy } from '@zag-js/tour';
14
+ export type { TourTriggerProps } from './tour-trigger.svelte';
15
+ export type { TourStepDetails } from './create-tour.svelte.js';
16
+ export { anatomy as tourAnatomy } from './tour-anatomy.js';
17
17
  export { getTourContext } from './tour-context.svelte.js';
@@ -1,3 +1,3 @@
1
1
  export * as Tour from './tour.js';
2
- export { anatomy as tourAnatomy } from '@zag-js/tour';
2
+ export { anatomy as tourAnatomy } from './tour-anatomy.js';
3
3
  export { getTourContext } from './tour-context.svelte.js';
@@ -0,0 +1,39 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+ import type {StepActionTriggerProps} from '@zag-js/tour';
4
+
5
+ export interface TourActionTriggerProps
6
+ extends StepActionTriggerProps,
7
+ HtmlIngredientProps<'button', HTMLButtonElement> {}
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import {mergeProps} from '../merge-props.js';
12
+ import {getTourContext} from './tour-context.svelte.js';
13
+
14
+ let {
15
+ ref = $bindable(null),
16
+ action,
17
+ asChild,
18
+ children,
19
+ ...props
20
+ }: TourActionTriggerProps = $props();
21
+
22
+ let tour = getTourContext();
23
+
24
+ let mergedProps = $derived(
25
+ mergeProps(tour.getActionTriggerProps({action}), props),
26
+ );
27
+ </script>
28
+
29
+ {#if asChild}
30
+ {@render asChild(mergedProps)}
31
+ {:else}
32
+ <button bind:this={ref} type="button" {...mergedProps}>
33
+ {#if children}
34
+ {@render children?.()}
35
+ {:else}
36
+ {action.label}
37
+ {/if}
38
+ </button>
39
+ {/if}
@@ -1,5 +1,6 @@
1
1
  import type { HtmlIngredientProps } from '../types.js';
2
- export interface TourPrevTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
2
+ import type { StepActionTriggerProps } from '@zag-js/tour';
3
+ export interface TourActionTriggerProps extends StepActionTriggerProps, HtmlIngredientProps<'button', HTMLButtonElement> {
3
4
  }
4
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> {
5
6
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -14,8 +15,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
14
15
  };
15
16
  z_$$bindings?: Bindings;
16
17
  }
17
- declare const TourPrevTrigger: $$__sveltets_2_IsomorphicComponent<TourPrevTriggerProps, {
18
+ declare const TourActionTrigger: $$__sveltets_2_IsomorphicComponent<TourActionTriggerProps, {
18
19
  [evt: string]: CustomEvent<any>;
19
20
  }, {}, {}, "ref">;
20
- type TourPrevTrigger = InstanceType<typeof TourPrevTrigger>;
21
- export default TourPrevTrigger;
21
+ type TourActionTrigger = InstanceType<typeof TourActionTrigger>;
22
+ export default TourActionTrigger;
@@ -0,0 +1,2 @@
1
+ export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "trigger" | "positioner" | "actionTrigger" | "closeTrigger" | "progressText" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
2
+ export declare const parts: Record<"title" | "content" | "trigger" | "positioner" | "actionTrigger" | "closeTrigger" | "progressText" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight", import("@zag-js/anatomy").AnatomyPart>;
@@ -0,0 +1,3 @@
1
+ import { anatomy as _ } from '@zag-js/tour';
2
+ export const anatomy = _.extendWith('trigger');
3
+ export const parts = anatomy.build();
@@ -21,10 +21,12 @@
21
21
  let mergedProps = $derived(mergeProps(tour.getArrowTipProps(), props));
22
22
  </script>
23
23
 
24
- {#if asChild}
25
- {@render asChild(mergedProps)}
26
- {:else}
27
- <span bind:this={ref} {...mergedProps}>
28
- {@render children?.()}
29
- </span>
24
+ {#if tour.step?.arrow}
25
+ {#if asChild}
26
+ {@render asChild(mergedProps)}
27
+ {:else}
28
+ <span bind:this={ref} {...mergedProps}>
29
+ {@render children?.()}
30
+ </span>
31
+ {/if}
30
32
  {/if}
@@ -21,10 +21,12 @@
21
21
  let mergedProps = $derived(mergeProps(tour.getArrowProps(), props));
22
22
  </script>
23
23
 
24
- {#if asChild}
25
- {@render asChild(mergedProps)}
26
- {:else}
27
- <span bind:this={ref} {...mergedProps}>
28
- {@render children?.()}
29
- </span>
24
+ {#if tour.step?.arrow}
25
+ {#if asChild}
26
+ {@render asChild(mergedProps)}
27
+ {:else}
28
+ <span bind:this={ref} {...mergedProps}>
29
+ {@render children?.()}
30
+ </span>
31
+ {/if}
30
32
  {/if}
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
3
 
4
- export interface TourOverlayProps
4
+ export interface TourBackdropProps
5
5
  extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
6
  </script>
7
7
 
@@ -17,19 +17,19 @@
17
17
  asChild,
18
18
  children,
19
19
  ...props
20
- }: TourOverlayProps = $props();
20
+ }: TourBackdropProps = $props();
21
21
 
22
22
  let tour = getTourContext();
23
23
  let presenceStrategyProps = getPresenceStrategyPropsContext();
24
24
  let presence = createPresence(
25
25
  reflect(() => ({
26
26
  ...presenceStrategyProps,
27
- present: tour.currentStep != null,
27
+ present: tour.step?.backdrop ? tour.open : false,
28
28
  })),
29
29
  );
30
30
 
31
31
  let mergedProps = $derived(
32
- mergeProps(tour.getOverlayProps(), presence.getPresenceProps(), props),
32
+ mergeProps(tour.getBackdropProps(), presence.getPresenceProps(), props),
33
33
  );
34
34
  </script>
35
35
 
@@ -1,5 +1,5 @@
1
1
  import type { HtmlIngredientProps } from '../types.js';
2
- export interface TourOverlayProps extends HtmlIngredientProps<'div', HTMLDivElement> {
2
+ export interface TourBackdropProps 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> & {
@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
14
14
  };
15
15
  z_$$bindings?: Bindings;
16
16
  }
17
- declare const TourOverlay: $$__sveltets_2_IsomorphicComponent<TourOverlayProps, {
17
+ declare const TourBackdrop: $$__sveltets_2_IsomorphicComponent<TourBackdropProps, {
18
18
  [evt: string]: CustomEvent<any>;
19
19
  }, {}, {}, "ref">;
20
- type TourOverlay = InstanceType<typeof TourOverlay>;
21
- export default TourOverlay;
20
+ type TourBackdrop = InstanceType<typeof TourBackdrop>;
21
+ export default TourBackdrop;
@@ -18,6 +18,7 @@
18
18
  }: TourContentProps = $props();
19
19
 
20
20
  let tour = getTourContext();
21
+
21
22
  let presence = getPresenceContext();
22
23
 
23
24
  let mergedProps = $derived(
@@ -25,6 +25,10 @@
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
27
  <p bind:this={ref} {...mergedProps}>
28
- {@render children?.()}
28
+ {#if children}
29
+ {@render children()}
30
+ {:else}
31
+ {tour.step?.description}
32
+ {/if}
29
33
  </p>
30
34
  {/if}
@@ -35,7 +35,7 @@
35
35
  let presence = createPresence(
36
36
  reflect(() => ({
37
37
  ...presenceStrategyProps,
38
- present: tour.currentStep != null,
38
+ present: tour.open,
39
39
  })),
40
40
  );
41
41
 
@@ -25,6 +25,10 @@
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
27
  <h2 bind:this={ref} {...mergedProps}>
28
- {@render children?.()}
28
+ {#if children}
29
+ {@render children()}
30
+ {:else}
31
+ {tour.step?.title}
32
+ {/if}
29
33
  </h2>
30
34
  {/if}
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
3
 
4
- export interface TourPrevTriggerProps
4
+ export interface TourTriggerProps
5
5
  extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
6
  </script>
7
7
 
@@ -14,11 +14,11 @@
14
14
  asChild,
15
15
  children,
16
16
  ...props
17
- }: TourPrevTriggerProps = $props();
17
+ }: TourTriggerProps = $props();
18
18
 
19
19
  let tour = getTourContext();
20
20
 
21
- let mergedProps = $derived(mergeProps(tour.getPrevTriggerProps(), props));
21
+ let mergedProps = $derived(mergeProps(tour.getTriggerProps(), props));
22
22
  </script>
23
23
 
24
24
  {#if asChild}
@@ -1,5 +1,5 @@
1
1
  import type { HtmlIngredientProps } from '../types.js';
2
- export interface TourSkipTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
2
+ export interface TourTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
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> & {
@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
14
14
  };
15
15
  z_$$bindings?: Bindings;
16
16
  }
17
- declare const TourSkipTrigger: $$__sveltets_2_IsomorphicComponent<TourSkipTriggerProps, {
17
+ declare const TourTrigger: $$__sveltets_2_IsomorphicComponent<TourTriggerProps, {
18
18
  [evt: string]: CustomEvent<any>;
19
19
  }, {}, {}, "ref">;
20
- type TourSkipTrigger = InstanceType<typeof TourSkipTrigger>;
21
- export default TourSkipTrigger;
20
+ type TourTrigger = InstanceType<typeof TourTrigger>;
21
+ export default TourTrigger;
@@ -1,14 +1,13 @@
1
+ export { default as ActionTrigger } from './tour-action-trigger.svelte';
1
2
  export { default as ArrowTip } from './tour-arrow-tip.svelte';
2
3
  export { default as Arrow } from './tour-arrow.svelte';
4
+ export { default as Backdrop } from './tour-backdrop.svelte';
3
5
  export { default as CloseTrigger } from './tour-close-trigger.svelte';
4
6
  export { default as Content } from './tour-content.svelte';
5
7
  export { default as Description } from './tour-description.svelte';
6
- export { default as NextTrigger } from './tour-next-trigger.svelte';
7
- export { default as Overlay } from './tour-overlay.svelte';
8
8
  export { default as Positioner } from './tour-positioner.svelte';
9
- export { default as PrevTrigger } from './tour-prev-trigger.svelte';
10
9
  export { default as ProgressText } from './tour-progress-text.svelte';
11
10
  export { default as Root } from './tour-root.svelte';
12
- export { default as SkipTrigger } from './tour-skip-trigger.svelte';
13
11
  export { default as Spotlight } from './tour-spotlight.svelte';
14
12
  export { default as Title } from './tour-title.svelte';
13
+ export { default as Trigger } from './tour-trigger.svelte';
package/dist/tour/tour.js CHANGED
@@ -1,14 +1,13 @@
1
+ export { default as ActionTrigger } from './tour-action-trigger.svelte';
1
2
  export { default as ArrowTip } from './tour-arrow-tip.svelte';
2
3
  export { default as Arrow } from './tour-arrow.svelte';
4
+ export { default as Backdrop } from './tour-backdrop.svelte';
3
5
  export { default as CloseTrigger } from './tour-close-trigger.svelte';
4
6
  export { default as Content } from './tour-content.svelte';
5
7
  export { default as Description } from './tour-description.svelte';
6
- export { default as NextTrigger } from './tour-next-trigger.svelte';
7
- export { default as Overlay } from './tour-overlay.svelte';
8
8
  export { default as Positioner } from './tour-positioner.svelte';
9
- export { default as PrevTrigger } from './tour-prev-trigger.svelte';
10
9
  export { default as ProgressText } from './tour-progress-text.svelte';
11
10
  export { default as Root } from './tour-root.svelte';
12
- export { default as SkipTrigger } from './tour-skip-trigger.svelte';
13
11
  export { default as Spotlight } from './tour-spotlight.svelte';
14
12
  export { default as Title } from './tour-title.svelte';
13
+ export { default as Trigger } from './tour-trigger.svelte';
@@ -1,12 +1,16 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
5
  export interface TreeViewBranchContentProps
5
- extends HtmlIngredientProps<'div', HTMLDivElement> {}
6
+ extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
6
7
  </script>
7
8
 
8
9
  <script lang="ts">
9
10
  import {mergeProps} from '../merge-props.js';
11
+ import {createPresence} from '../presence/create-presence.svelte.js';
12
+ import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
13
+ import {reflect} from '@zag-js/svelte';
10
14
  import {
11
15
  getTreeViewBranchPropsContext,
12
16
  getTreeViewContext,
@@ -22,16 +26,31 @@
22
26
  let treeView = getTreeViewContext();
23
27
 
24
28
  let branchProps = getTreeViewBranchPropsContext();
29
+ let branchState = $derived(treeView.getBranchState(branchProps));
30
+
31
+ let presenceStrategyProps = getPresenceStrategyPropsContext();
32
+ let presence = createPresence(
33
+ reflect(() => ({
34
+ present: branchState.expanded,
35
+ ...presenceStrategyProps,
36
+ })),
37
+ );
25
38
 
26
39
  let mergedProps = $derived(
27
- mergeProps(treeView.getBranchContentProps(branchProps), props),
40
+ mergeProps(
41
+ treeView.getBranchContentProps(branchProps),
42
+ presence.getPresenceProps(),
43
+ props,
44
+ ),
28
45
  );
29
46
  </script>
30
47
 
31
- {#if asChild}
32
- {@render asChild(mergedProps)}
33
- {:else}
34
- <div bind:this={ref} {...mergedProps}>
35
- {@render children?.()}
36
- </div>
48
+ {#if presence.mounted}
49
+ {#if asChild}
50
+ {@render asChild(presence.setReference, mergedProps)}
51
+ {:else}
52
+ <div bind:this={ref} {...mergedProps}>
53
+ {@render children?.()}
54
+ </div>
55
+ {/if}
37
56
  {/if}
@@ -1,5 +1,6 @@
1
1
  import type { HtmlIngredientProps } from '../types.js';
2
- export interface TreeViewBranchContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
2
+ import type { Action } from 'svelte/action';
3
+ export interface TreeViewBranchContentProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
3
4
  }
4
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> {
5
6
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -1,4 +1,5 @@
1
1
  <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
2
3
  import type {Assign, HtmlIngredientProps} from '../types.js';
3
4
  import type {
4
5
  CreateTreeViewProps,
@@ -7,13 +8,15 @@
7
8
 
8
9
  export interface TreeViewProps
9
10
  extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
11
- CreateTreeViewProps
12
- > {}
11
+ HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
12
+ CreateTreeViewProps
13
+ >,
14
+ PresenceStrategyProps {}
13
15
  </script>
14
16
 
15
17
  <script lang="ts">
16
18
  import {mergeProps} from '../merge-props.js';
19
+ import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
17
20
  import {reflect} from '@zag-js/svelte';
18
21
  import {createSplitProps} from '@zag-js/utils';
19
22
  import {createTreeView} from './create-tree-view.svelte.js';
@@ -26,6 +29,12 @@
26
29
  ...props
27
30
  }: TreeViewProps = $props();
28
31
 
32
+ let [presenceStrategyProps, rest] = $derived(
33
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
34
+ props,
35
+ ),
36
+ );
37
+
29
38
  let [createTreeViewProps, localProps] = $derived(
30
39
  createSplitProps<CreateTreeViewProps>([
31
40
  'id',
@@ -39,14 +48,14 @@
39
48
  'onFocusChange',
40
49
  'onExpandedChange',
41
50
  'onSelectionChange',
42
- ])(props),
51
+ ])(rest),
43
52
  );
44
53
 
45
54
  let treeView = createTreeView(reflect(() => createTreeViewProps));
46
-
47
55
  let mergedProps = $derived(mergeProps(treeView.getRootProps(), localProps));
48
56
 
49
57
  setTreeViewContext(treeView);
58
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
50
59
  </script>
51
60
 
52
61
  {#if asChild}
@@ -1,6 +1,7 @@
1
+ import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
1
2
  import type { Assign, HtmlIngredientProps } from '../types.js';
2
3
  import type { CreateTreeViewProps, CreateTreeViewReturn } from './create-tree-view.svelte.js';
3
- export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps> {
4
+ export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps>, PresenceStrategyProps {
4
5
  }
5
6
  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
7
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
- "version": "0.0.67",
4
+ "license": "MIT",
5
+ "version": "0.0.69",
5
6
  "packageManager": "pnpm@9.7.0",
6
7
  "svelte": "./dist/index.js",
7
8
  "types": "./dist/index.d.ts",
@@ -9,6 +10,190 @@
9
10
  ".": {
10
11
  "types": "./dist/index.d.ts",
11
12
  "svelte": "./dist/index.js"
13
+ },
14
+ "./accordion": {
15
+ "types": "./dist/accordion/index.d.ts",
16
+ "svelte": "./dist/accordion/index.js"
17
+ },
18
+ "./avatar": {
19
+ "types": "./dist/avatar/index.d.ts",
20
+ "svelte": "./dist/avatar/index.js"
21
+ },
22
+ "./carousel": {
23
+ "types": "./dist/carousel/index.d.ts",
24
+ "svelte": "./dist/carousel/index.js"
25
+ },
26
+ "./checkbox": {
27
+ "types": "./dist/checkbox/index.d.ts",
28
+ "svelte": "./dist/checkbox/index.js"
29
+ },
30
+ "./clipboard": {
31
+ "types": "./dist/clipboard/index.d.ts",
32
+ "svelte": "./dist/clipboard/index.js"
33
+ },
34
+ "./collapsible": {
35
+ "types": "./dist/collapsible/index.d.ts",
36
+ "svelte": "./dist/collapsible/index.js"
37
+ },
38
+ "./color-picker": {
39
+ "types": "./dist/color-picker/index.d.ts",
40
+ "svelte": "./dist/color-picker/index.js"
41
+ },
42
+ "./combobox": {
43
+ "types": "./dist/combobox/index.d.ts",
44
+ "svelte": "./dist/combobox/index.js"
45
+ },
46
+ "./date-picker": {
47
+ "types": "./dist/date-picker/index.d.ts",
48
+ "svelte": "./dist/date-picker/index.js"
49
+ },
50
+ "./dialog": {
51
+ "types": "./dist/dialog/index.d.ts",
52
+ "svelte": "./dist/dialog/index.js"
53
+ },
54
+ "./editable": {
55
+ "types": "./dist/editable/index.d.ts",
56
+ "svelte": "./dist/editable/index.js"
57
+ },
58
+ "./environment-provider": {
59
+ "types": "./dist/environment-provider/index.d.ts",
60
+ "svelte": "./dist/environment-provider/index.js"
61
+ },
62
+ "./field": {
63
+ "types": "./dist/field/index.d.ts",
64
+ "svelte": "./dist/field/index.js"
65
+ },
66
+ "./file-upload": {
67
+ "types": "./dist/file-upload/index.d.ts",
68
+ "svelte": "./dist/file-upload/index.js"
69
+ },
70
+ "./floating-panel": {
71
+ "types": "./dist/floating-panel/index.d.ts",
72
+ "svelte": "./dist/floating-panel/index.js"
73
+ },
74
+ "./highlight": {
75
+ "types": "./dist/highlight/index.d.ts",
76
+ "svelte": "./dist/highlight/index.js"
77
+ },
78
+ "./hover-card": {
79
+ "types": "./dist/hover-card/index.d.ts",
80
+ "svelte": "./dist/hover-card/index.js"
81
+ },
82
+ "./locale-provider": {
83
+ "types": "./dist/locale-provider/index.d.ts",
84
+ "svelte": "./dist/locale-provider/index.js"
85
+ },
86
+ "./menu": {
87
+ "types": "./dist/menu/index.d.ts",
88
+ "svelte": "./dist/menu/index.js"
89
+ },
90
+ "./number-input": {
91
+ "types": "./dist/number-input/index.d.ts",
92
+ "svelte": "./dist/number-input/index.js"
93
+ },
94
+ "./pagination": {
95
+ "types": "./dist/pagination/index.d.ts",
96
+ "svelte": "./dist/pagination/index.js"
97
+ },
98
+ "./pin-input": {
99
+ "types": "./dist/pin-input/index.d.ts",
100
+ "svelte": "./dist/pin-input/index.js"
101
+ },
102
+ "./popover": {
103
+ "types": "./dist/popover/index.d.ts",
104
+ "svelte": "./dist/popover/index.js"
105
+ },
106
+ "./portal": {
107
+ "types": "./dist/portal/index.d.ts",
108
+ "svelte": "./dist/portal/index.js"
109
+ },
110
+ "./presence": {
111
+ "types": "./dist/presence/index.d.ts",
112
+ "svelte": "./dist/presence/index.js"
113
+ },
114
+ "./progress": {
115
+ "types": "./dist/progress/index.d.ts",
116
+ "svelte": "./dist/progress/index.js"
117
+ },
118
+ "./qr-code": {
119
+ "types": "./dist/qr-code/index.d.ts",
120
+ "svelte": "./dist/qr-code/index.js"
121
+ },
122
+ "./radio-group": {
123
+ "types": "./dist/radio-group/index.d.ts",
124
+ "svelte": "./dist/radio-group/index.js"
125
+ },
126
+ "./rating-group": {
127
+ "types": "./dist/rating-group/index.d.ts",
128
+ "svelte": "./dist/rating-group/index.js"
129
+ },
130
+ "./segment-group": {
131
+ "types": "./dist/segment-group/index.d.ts",
132
+ "svelte": "./dist/segment-group/index.js"
133
+ },
134
+ "./select": {
135
+ "types": "./dist/select/index.d.ts",
136
+ "svelte": "./dist/select/index.js"
137
+ },
138
+ "./signature-pad": {
139
+ "types": "./dist/signature-pad/index.d.ts",
140
+ "svelte": "./dist/signature-pad/index.js"
141
+ },
142
+ "./slider": {
143
+ "types": "./dist/slider/index.d.ts",
144
+ "svelte": "./dist/slider/index.js"
145
+ },
146
+ "./splitter": {
147
+ "types": "./dist/splitter/index.d.ts",
148
+ "svelte": "./dist/splitter/index.js"
149
+ },
150
+ "./steps": {
151
+ "types": "./dist/steps/index.d.ts",
152
+ "svelte": "./dist/steps/index.js"
153
+ },
154
+ "./switch": {
155
+ "types": "./dist/switch/index.d.ts",
156
+ "svelte": "./dist/switch/index.js"
157
+ },
158
+ "./tabs": {
159
+ "types": "./dist/tabs/index.d.ts",
160
+ "svelte": "./dist/tabs/index.js"
161
+ },
162
+ "./tags-input": {
163
+ "types": "./dist/tags-input/index.d.ts",
164
+ "svelte": "./dist/tags-input/index.js"
165
+ },
166
+ "./time-picker": {
167
+ "types": "./dist/time-picker/index.d.ts",
168
+ "svelte": "./dist/time-picker/index.js"
169
+ },
170
+ "./timer": {
171
+ "types": "./dist/timer/index.d.ts",
172
+ "svelte": "./dist/timer/index.js"
173
+ },
174
+ "./toast": {
175
+ "types": "./dist/toast/index.d.ts",
176
+ "svelte": "./dist/toast/index.js"
177
+ },
178
+ "./toggle-group": {
179
+ "types": "./dist/toggle-group/index.d.ts",
180
+ "svelte": "./dist/toggle-group/index.js"
181
+ },
182
+ "./tooltip": {
183
+ "types": "./dist/tooltip/index.d.ts",
184
+ "svelte": "./dist/tooltip/index.js"
185
+ },
186
+ "./tour": {
187
+ "types": "./dist/tour/index.d.ts",
188
+ "svelte": "./dist/tour/index.js"
189
+ },
190
+ "./tree-view": {
191
+ "types": "./dist/tree-view/index.d.ts",
192
+ "svelte": "./dist/tree-view/index.js"
193
+ },
194
+ "./merge-props": {
195
+ "types": "./dist/merge-props.d.ts",
196
+ "import": "./dist/merge-props.js"
12
197
  }
13
198
  },
14
199
  "files": [
@@ -85,52 +270,52 @@
85
270
  "release": "release-it"
86
271
  },
87
272
  "dependencies": {
88
- "@zag-js/accordion": "0.71.0",
89
- "@zag-js/anatomy": "0.71.0",
90
- "@zag-js/avatar": "0.71.0",
91
- "@zag-js/carousel": "0.71.0",
92
- "@zag-js/checkbox": "0.71.0",
93
- "@zag-js/clipboard": "0.71.0",
94
- "@zag-js/collapsible": "0.71.0",
95
- "@zag-js/color-picker": "0.71.0",
96
- "@zag-js/combobox": "0.71.0",
97
- "@zag-js/core": "0.71.0",
98
- "@zag-js/date-picker": "0.71.0",
99
- "@zag-js/dialog": "0.71.0",
100
- "@zag-js/dom-query": "0.71.0",
101
- "@zag-js/editable": "0.71.0",
102
- "@zag-js/file-upload": "0.71.0",
103
- "@zag-js/floating-panel": "0.71.0",
104
- "@zag-js/highlight-word": "0.71.0",
105
- "@zag-js/hover-card": "0.71.0",
106
- "@zag-js/i18n-utils": "0.71.0",
107
- "@zag-js/menu": "0.71.0",
108
- "@zag-js/number-input": "0.71.0",
109
- "@zag-js/pagination": "0.71.0",
110
- "@zag-js/pin-input": "0.71.0",
111
- "@zag-js/popover": "0.71.0",
112
- "@zag-js/presence": "0.71.0",
113
- "@zag-js/progress": "0.71.0",
114
- "@zag-js/qr-code": "0.71.0",
115
- "@zag-js/radio-group": "0.71.0",
116
- "@zag-js/rating-group": "0.71.0",
117
- "@zag-js/select": "0.71.0",
118
- "@zag-js/signature-pad": "0.71.0",
119
- "@zag-js/slider": "0.71.0",
120
- "@zag-js/splitter": "0.71.0",
121
- "@zag-js/steps": "0.71.0",
122
- "@zag-js/svelte": "0.71.0",
123
- "@zag-js/switch": "0.71.0",
124
- "@zag-js/tabs": "0.71.0",
125
- "@zag-js/tags-input": "0.71.0",
126
- "@zag-js/time-picker": "0.71.0",
127
- "@zag-js/timer": "0.71.0",
128
- "@zag-js/toast": "0.71.0",
129
- "@zag-js/toggle-group": "0.71.0",
130
- "@zag-js/tooltip": "0.71.0",
131
- "@zag-js/tour": "0.71.0",
132
- "@zag-js/tree-view": "0.71.0",
133
- "@zag-js/utils": "0.71.0",
273
+ "@zag-js/accordion": "0.72.0",
274
+ "@zag-js/anatomy": "0.72.0",
275
+ "@zag-js/avatar": "0.72.0",
276
+ "@zag-js/carousel": "0.72.0",
277
+ "@zag-js/checkbox": "0.72.0",
278
+ "@zag-js/clipboard": "0.72.0",
279
+ "@zag-js/collapsible": "0.72.0",
280
+ "@zag-js/color-picker": "0.72.0",
281
+ "@zag-js/combobox": "0.72.0",
282
+ "@zag-js/core": "0.72.0",
283
+ "@zag-js/date-picker": "0.72.0",
284
+ "@zag-js/dialog": "0.72.0",
285
+ "@zag-js/dom-query": "0.72.0",
286
+ "@zag-js/editable": "0.72.0",
287
+ "@zag-js/file-upload": "0.72.0",
288
+ "@zag-js/floating-panel": "0.72.0",
289
+ "@zag-js/highlight-word": "0.72.0",
290
+ "@zag-js/hover-card": "0.72.0",
291
+ "@zag-js/i18n-utils": "0.72.0",
292
+ "@zag-js/menu": "0.72.0",
293
+ "@zag-js/number-input": "0.72.0",
294
+ "@zag-js/pagination": "0.72.0",
295
+ "@zag-js/pin-input": "0.72.0",
296
+ "@zag-js/popover": "0.72.0",
297
+ "@zag-js/presence": "0.72.0",
298
+ "@zag-js/progress": "0.72.0",
299
+ "@zag-js/qr-code": "0.72.0",
300
+ "@zag-js/radio-group": "0.72.0",
301
+ "@zag-js/rating-group": "0.72.0",
302
+ "@zag-js/select": "0.72.0",
303
+ "@zag-js/signature-pad": "0.72.0",
304
+ "@zag-js/slider": "0.72.0",
305
+ "@zag-js/splitter": "0.72.0",
306
+ "@zag-js/steps": "0.72.0",
307
+ "@zag-js/svelte": "0.72.0",
308
+ "@zag-js/switch": "0.72.0",
309
+ "@zag-js/tabs": "0.72.0",
310
+ "@zag-js/tags-input": "0.72.0",
311
+ "@zag-js/time-picker": "0.72.0",
312
+ "@zag-js/timer": "0.72.0",
313
+ "@zag-js/toast": "0.72.0",
314
+ "@zag-js/toggle-group": "0.72.0",
315
+ "@zag-js/tooltip": "0.72.0",
316
+ "@zag-js/tour": "0.72.0",
317
+ "@zag-js/tree-view": "0.72.0",
318
+ "@zag-js/utils": "0.72.0",
134
319
  "uid": "2.0.2"
135
320
  },
136
321
  "peerDependencies": {
package/dist/is-pojo.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import type { GenericObject } from './types.js';
2
- export declare function isPojo<T extends GenericObject>(value: unknown): value is T;
@@ -1,30 +0,0 @@
1
- <script lang="ts" module>
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface TourNextTriggerProps
5
- extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {mergeProps} from '../merge-props.js';
10
- import {getTourContext} from './tour-context.svelte.js';
11
-
12
- let {
13
- ref = $bindable(null),
14
- asChild,
15
- children,
16
- ...props
17
- }: TourNextTriggerProps = $props();
18
-
19
- let tour = getTourContext();
20
-
21
- let mergedProps = $derived(mergeProps(tour.getNextTriggerProps(), props));
22
- </script>
23
-
24
- {#if asChild}
25
- {@render asChild(mergedProps)}
26
- {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
28
- {@render children?.()}
29
- </button>
30
- {/if}
@@ -1,21 +0,0 @@
1
- import type { HtmlIngredientProps } from '../types.js';
2
- export interface TourNextTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
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 TourNextTrigger: $$__sveltets_2_IsomorphicComponent<TourNextTriggerProps, {
18
- [evt: string]: CustomEvent<any>;
19
- }, {}, {}, "ref">;
20
- type TourNextTrigger = InstanceType<typeof TourNextTrigger>;
21
- export default TourNextTrigger;
@@ -1,30 +0,0 @@
1
- <script lang="ts" module>
2
- import type {HtmlIngredientProps} from '../types.js';
3
-
4
- export interface TourSkipTriggerProps
5
- extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import {mergeProps} from '../merge-props.js';
10
- import {getTourContext} from './tour-context.svelte.js';
11
-
12
- let {
13
- ref = $bindable(null),
14
- asChild,
15
- children,
16
- ...props
17
- }: TourSkipTriggerProps = $props();
18
-
19
- let tour = getTourContext();
20
-
21
- let mergedProps = $derived(mergeProps(tour.getSkipTriggerProps(), props));
22
- </script>
23
-
24
- {#if asChild}
25
- {@render asChild(mergedProps)}
26
- {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
28
- {@render children?.()}
29
- </button>
30
- {/if}