ui-ingredients 0.0.43 → 0.0.45
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -0
- package/dist/accordion/create-accordion.svelte.js +3 -4
- package/dist/accordion/item-content.svelte +7 -11
- package/dist/accordion/item.svelte +2 -2
- package/dist/accordion/root.svelte +4 -6
- package/dist/avatar/create-avatar.svelte.js +3 -4
- package/dist/avatar/root.svelte +2 -2
- package/dist/carousel/create-carousel.svelte.js +3 -4
- package/dist/carousel/indicator.svelte +2 -2
- package/dist/carousel/item.svelte +2 -2
- package/dist/carousel/root.svelte +2 -2
- package/dist/checkbox/create-checkbox.svelte.js +4 -5
- package/dist/checkbox/root.svelte +2 -2
- package/dist/clipboard/create-clipboard.svelte.js +3 -4
- package/dist/clipboard/root.svelte +2 -2
- package/dist/collapsible/create-collapsible.svelte.js +3 -4
- package/dist/collapsible/root.svelte +2 -2
- package/dist/color-picker/create-color-picker.svelte.js +3 -4
- package/dist/color-picker/root.svelte +2 -2
- package/dist/combobox/create-combobox.svelte.js +4 -5
- package/dist/combobox/item.svelte +2 -2
- package/dist/combobox/root.svelte +10 -16
- package/dist/create-context.svelte.js +1 -9
- package/dist/date-picker/create-date-picker.svelte.js +2 -3
- package/dist/date-picker/day-table-cell.svelte +2 -2
- package/dist/date-picker/month-table-cell.svelte +2 -2
- package/dist/date-picker/root.svelte +10 -18
- package/dist/date-picker/year-table-cell.svelte +2 -2
- package/dist/dialog/backdrop.svelte +7 -12
- package/dist/dialog/create-dialog.svelte.js +3 -4
- package/dist/dialog/root.svelte +6 -12
- package/dist/editable/create-editable.svelte.js +4 -5
- package/dist/editable/root.svelte +2 -2
- package/dist/environment-provider/root.svelte +5 -8
- package/dist/field/create-field.svelte.d.ts +1 -22
- package/dist/field/create-field.svelte.js +9 -20
- package/dist/field/root.svelte +2 -2
- package/dist/file-upload/create-file-upload.svelte.js +4 -5
- package/dist/file-upload/item.svelte +2 -2
- package/dist/file-upload/root.svelte +2 -2
- package/dist/floating-panel/body.svelte +24 -0
- package/dist/floating-panel/body.svelte.d.ts +18 -0
- package/dist/floating-panel/close-trigger.svelte +27 -0
- package/dist/floating-panel/close-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/content.svelte +36 -0
- package/dist/floating-panel/content.svelte.d.ts +18 -0
- package/dist/floating-panel/context.svelte.d.ts +2 -0
- package/dist/floating-panel/context.svelte.js +2 -0
- package/dist/floating-panel/create-floating-panel.svelte.d.ts +2 -1
- package/dist/floating-panel/create-floating-panel.svelte.js +4 -4
- package/dist/floating-panel/drag-trigger.svelte +27 -0
- package/dist/floating-panel/drag-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/floating-panel.d.ts +13 -0
- package/dist/floating-panel/floating-panel.js +13 -0
- package/dist/floating-panel/header.svelte +25 -0
- package/dist/floating-panel/header.svelte.d.ts +18 -0
- package/dist/floating-panel/index.d.ts +16 -0
- package/dist/floating-panel/index.js +3 -0
- package/dist/floating-panel/maximize-trigger.svelte +28 -0
- package/dist/floating-panel/maximize-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/minimize-trigger.svelte +28 -0
- package/dist/floating-panel/minimize-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/positioner.svelte +35 -0
- package/dist/floating-panel/positioner.svelte.d.ts +18 -0
- package/dist/floating-panel/resize-trigger.svelte +36 -0
- package/dist/floating-panel/resize-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/restore-trigger.svelte +28 -0
- package/dist/floating-panel/restore-trigger.svelte.d.ts +18 -0
- package/dist/floating-panel/root.svelte +45 -0
- package/dist/floating-panel/root.svelte.d.ts +18 -0
- package/dist/floating-panel/title.svelte +25 -0
- package/dist/floating-panel/title.svelte.d.ts +18 -0
- package/dist/floating-panel/trigger.svelte +27 -0
- package/dist/floating-panel/trigger.svelte.d.ts +18 -0
- package/dist/highlight/highlight.svelte +42 -0
- package/dist/highlight/highlight.svelte.d.ts +18 -0
- package/dist/highlight/index.d.ts +1 -0
- package/dist/highlight/index.js +1 -0
- package/dist/hover-card/create-hover-card.svelte.js +3 -4
- package/dist/hover-card/root.svelte +6 -11
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/is-object.d.ts +2 -0
- package/dist/is-object.js +4 -0
- package/dist/locale-provider/root.svelte +8 -6
- package/dist/menu/create-menu.svelte.js +3 -4
- package/dist/menu/item.svelte +2 -2
- package/dist/menu/option-item.svelte +2 -2
- package/dist/menu/root.svelte +6 -12
- package/dist/merge-props.js +1 -4
- package/dist/number-input/create-number-input.svelte.js +4 -5
- package/dist/number-input/root.svelte +2 -2
- package/dist/pagination/create-pagination.svelte.js +3 -4
- package/dist/pagination/root.svelte +2 -2
- package/dist/pin-input/create-pin-input.svelte.js +4 -5
- package/dist/pin-input/root.svelte +2 -2
- package/dist/popover/create-popover.svelte.js +3 -4
- package/dist/popover/root.svelte +6 -11
- package/dist/presence/root.svelte +7 -3
- package/dist/progress/create-progress.svelte.js +3 -4
- package/dist/progress/root.svelte +2 -2
- package/dist/qr-code/create-qr-code.svelte.js +3 -4
- package/dist/qr-code/root.svelte +2 -2
- package/dist/radio-group/create-radio-group.svelte.js +3 -4
- package/dist/radio-group/item.svelte +2 -2
- package/dist/radio-group/root.svelte +2 -2
- package/dist/rating-group/create-rating-group.svelte.js +4 -5
- package/dist/rating-group/root.svelte +2 -2
- package/dist/segment-group/create-segment-group.svelte.js +3 -4
- package/dist/segment-group/item.svelte +2 -2
- package/dist/segment-group/root.svelte +2 -2
- package/dist/select/create-select.svelte.js +2 -3
- package/dist/select/item.svelte +2 -2
- package/dist/select/root.svelte +11 -19
- package/dist/signature-pad/create-signature-pad.svelte.js +3 -4
- package/dist/signature-pad/root.svelte +2 -2
- package/dist/slider/create-slider.svelte.js +3 -4
- package/dist/slider/root.svelte +2 -2
- package/dist/slider/thumb.svelte +2 -2
- package/dist/splitter/create-splitter.svelte.js +3 -4
- package/dist/splitter/panel.svelte +2 -2
- package/dist/splitter/resize-trigger.svelte +2 -2
- package/dist/splitter/root.svelte +2 -2
- package/dist/steps/create-steps.svelte.js +3 -4
- package/dist/steps/item.svelte +2 -2
- package/dist/steps/root.svelte +2 -2
- package/dist/switch/create-switch.svelte.js +4 -5
- package/dist/switch/root.svelte +2 -2
- package/dist/tabs/content.svelte +2 -2
- package/dist/tabs/create-tabs.svelte.js +3 -4
- package/dist/tabs/root.svelte +2 -2
- package/dist/tabs/trigger.svelte +2 -2
- package/dist/tags-input/create-tags-input.svelte.js +4 -5
- package/dist/tags-input/item.svelte +2 -2
- package/dist/tags-input/root.svelte +2 -2
- package/dist/time-picker/create-time-picker.svelte.js +3 -4
- package/dist/time-picker/root.svelte +11 -21
- package/dist/timer/create-timer.svelte.js +3 -4
- package/dist/timer/item.svelte +2 -2
- package/dist/timer/root.svelte +2 -2
- package/dist/toast/create-toast.svelte.js +1 -2
- package/dist/toast/create-toaster.svelte.js +2 -3
- package/dist/toggle-group/create-toggle-group.svelte.js +3 -4
- package/dist/toggle-group/item.svelte +2 -2
- package/dist/toggle-group/root.svelte +2 -2
- package/dist/tooltip/create-tooltip.svelte.js +3 -4
- package/dist/tooltip/root.svelte +6 -12
- package/dist/tour/arrow-tip.svelte +24 -0
- package/dist/tour/arrow-tip.svelte.d.ts +18 -0
- package/dist/tour/arrow.svelte +24 -0
- package/dist/tour/arrow.svelte.d.ts +18 -0
- package/dist/tour/close-trigger.svelte +25 -0
- package/dist/tour/close-trigger.svelte.d.ts +18 -0
- package/dist/tour/content.svelte +30 -0
- package/dist/tour/content.svelte.d.ts +18 -0
- package/dist/tour/context.svelte.d.ts +2 -0
- package/dist/tour/context.svelte.js +3 -0
- package/dist/tour/create-tour.svelte.js +4 -4
- package/dist/tour/description.svelte +24 -0
- package/dist/tour/description.svelte.d.ts +18 -0
- package/dist/tour/index.d.ts +17 -0
- package/dist/tour/index.js +3 -0
- package/dist/tour/next-trigger.svelte +24 -0
- package/dist/tour/next-trigger.svelte.d.ts +18 -0
- package/dist/tour/overlay.svelte +38 -0
- package/dist/tour/overlay.svelte.d.ts +18 -0
- package/dist/tour/positioner.svelte +30 -0
- package/dist/tour/positioner.svelte.d.ts +18 -0
- package/dist/tour/prev-trigger.svelte +24 -0
- package/dist/tour/prev-trigger.svelte.d.ts +18 -0
- package/dist/tour/progress-text.svelte +28 -0
- package/dist/tour/progress-text.svelte.d.ts +18 -0
- package/dist/tour/root.svelte +47 -0
- package/dist/tour/root.svelte.d.ts +18 -0
- package/dist/tour/skip-trigger.svelte +24 -0
- package/dist/tour/skip-trigger.svelte.d.ts +18 -0
- package/dist/tour/spotlight.svelte +24 -0
- package/dist/tour/spotlight.svelte.d.ts +18 -0
- package/dist/tour/title.svelte +24 -0
- package/dist/tour/title.svelte.d.ts +18 -0
- package/dist/tour/tour.d.ts +14 -0
- package/dist/tour/tour.js +14 -0
- package/dist/tree-view/branch.svelte +2 -2
- package/dist/tree-view/create-tree-view.svelte.js +3 -4
- package/dist/tree-view/item.svelte +2 -2
- package/dist/tree-view/root.svelte +2 -2
- package/dist/types.d.ts +10 -16
- package/package.json +2 -1
@@ -0,0 +1,30 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourContentProps extends HtmlIngredientProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getPresenceContext} from '../presence/context.svelte.js';
|
10
|
+
import {getTourContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {asChild, children, ...props}: TourContentProps = $props();
|
13
|
+
|
14
|
+
let tour = getTourContext();
|
15
|
+
let presence = getPresenceContext();
|
16
|
+
|
17
|
+
let mergedProps = $derived(
|
18
|
+
mergeProps(props, tour.getContentProps(), presence.getPresenceProps()),
|
19
|
+
);
|
20
|
+
</script>
|
21
|
+
|
22
|
+
{#if presence.mounted}
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(mergedProps)}
|
25
|
+
{:else}
|
26
|
+
<div use:presence.ref {...mergedProps}>
|
27
|
+
{@render children?.()}
|
28
|
+
</div>
|
29
|
+
{/if}
|
30
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const Content: $$__sveltets_2_IsomorphicComponent<TourContentProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type Content = InstanceType<typeof Content>;
|
18
|
+
export default Content;
|
@@ -7,12 +7,12 @@ export function createTour(props) {
|
|
7
7
|
const locale = getLocaleContext();
|
8
8
|
const environment = getEnvironmentContext();
|
9
9
|
const id = uid();
|
10
|
-
const context =
|
10
|
+
const context = reflect(() => ({
|
11
|
+
...props,
|
11
12
|
id: props.id ?? id,
|
12
13
|
dir: locale?.dir,
|
13
14
|
getRootNode: environment?.getRootNode,
|
14
|
-
}))
|
15
|
+
}));
|
15
16
|
const [state, send] = useMachine(tour.machine(context), { context });
|
16
|
-
|
17
|
-
return api;
|
17
|
+
return reflect(() => tour.connect(state, send, normalizeProps));
|
18
18
|
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourDescriptionProps extends HtmlIngredientProps<'p'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getTourContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: TourDescriptionProps = $props();
|
12
|
+
|
13
|
+
let tour = getTourContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, tour.getDescriptionProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<p {...mergedProps}>
|
22
|
+
{@render children?.()}
|
23
|
+
</p>
|
24
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const Description: $$__sveltets_2_IsomorphicComponent<TourDescriptionProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type Description = InstanceType<typeof Description>;
|
18
|
+
export default Description;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
export * as Tour from './tour.js';
|
2
|
+
export type { TourArrowTipProps } from './arrow-tip.svelte';
|
3
|
+
export type { TourArrowProps } from './arrow.svelte';
|
4
|
+
export type { TourCloseTriggerProps } from './close-trigger.svelte';
|
5
|
+
export type { TourContentProps } from './content.svelte';
|
6
|
+
export type { TourDescriptionProps } from './description.svelte';
|
7
|
+
export type { TourNextTriggerProps } from './next-trigger.svelte';
|
8
|
+
export type { TourOverlayProps } from './overlay.svelte';
|
9
|
+
export type { TourPositionerProps } from './positioner.svelte';
|
10
|
+
export type { TourPrevTriggerProps } from './prev-trigger.svelte';
|
11
|
+
export type { TourProgressTextProps } from './progress-text.svelte';
|
12
|
+
export type { TourProps } from './root.svelte';
|
13
|
+
export type { TourSkipTriggerProps } from './skip-trigger.svelte';
|
14
|
+
export type { TourSpotlightProps } from './spotlight.svelte';
|
15
|
+
export type { TourTitleProps } from './title.svelte';
|
16
|
+
export { anatomy as tourAnatomy } from '@zag-js/tour';
|
17
|
+
export { getTourContext } from './context.svelte.js';
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourNextTriggerProps extends HtmlIngredientProps<'button'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getTourContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: TourNextTriggerProps = $props();
|
12
|
+
|
13
|
+
let tour = getTourContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, tour.getNextTriggerProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<button type="button" {...mergedProps}>
|
22
|
+
{@render children?.()}
|
23
|
+
</button>
|
24
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const NextTrigger: $$__sveltets_2_IsomorphicComponent<TourNextTriggerProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type NextTrigger = InstanceType<typeof NextTrigger>;
|
18
|
+
export default NextTrigger;
|
@@ -0,0 +1,38 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourOverlayProps extends HtmlIngredientProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
|
10
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
11
|
+
import {reflect} from '@zag-js/svelte';
|
12
|
+
import {getTourContext} from './context.svelte.js';
|
13
|
+
|
14
|
+
let {asChild, children, ...props}: TourOverlayProps = $props();
|
15
|
+
|
16
|
+
let tour = getTourContext();
|
17
|
+
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
18
|
+
let presence = createPresence(
|
19
|
+
reflect(() => ({
|
20
|
+
...presenceStrategyProps,
|
21
|
+
present: tour.currentStep != null,
|
22
|
+
})),
|
23
|
+
);
|
24
|
+
|
25
|
+
let mergedProps = $derived(
|
26
|
+
mergeProps(props, tour.getOverlayProps(), presence.getPresenceProps()),
|
27
|
+
);
|
28
|
+
</script>
|
29
|
+
|
30
|
+
{#if presence.mounted}
|
31
|
+
{#if asChild}
|
32
|
+
{@render asChild(mergedProps)}
|
33
|
+
{:else}
|
34
|
+
<div use:presence.ref {...mergedProps}>
|
35
|
+
{@render children?.()}
|
36
|
+
</div>
|
37
|
+
{/if}
|
38
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const Overlay: $$__sveltets_2_IsomorphicComponent<TourOverlayProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type Overlay = InstanceType<typeof Overlay>;
|
18
|
+
export default Overlay;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourPositionerProps extends HtmlIngredientProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getPresenceContext} from '../presence/context.svelte.js';
|
10
|
+
import {getTourContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {asChild, children, ...props}: TourPositionerProps = $props();
|
13
|
+
|
14
|
+
let tour = getTourContext();
|
15
|
+
let presence = getPresenceContext();
|
16
|
+
|
17
|
+
let mergedProps = $derived(
|
18
|
+
mergeProps(props, tour.getPositionerProps(), presence.getPresenceProps()),
|
19
|
+
);
|
20
|
+
</script>
|
21
|
+
|
22
|
+
{#if presence.mounted}
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(mergedProps)}
|
25
|
+
{:else}
|
26
|
+
<div {...mergedProps}>
|
27
|
+
{@render children?.()}
|
28
|
+
</div>
|
29
|
+
{/if}
|
30
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const Positioner: $$__sveltets_2_IsomorphicComponent<TourPositionerProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type Positioner = InstanceType<typeof Positioner>;
|
18
|
+
export default Positioner;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourPrevTriggerProps extends HtmlIngredientProps<'button'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getTourContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: TourPrevTriggerProps = $props();
|
12
|
+
|
13
|
+
let tour = getTourContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, tour.getPrevTriggerProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<button type="button" {...mergedProps}>
|
22
|
+
{@render children?.()}
|
23
|
+
</button>
|
24
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const PrevTrigger: $$__sveltets_2_IsomorphicComponent<TourPrevTriggerProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type PrevTrigger = InstanceType<typeof PrevTrigger>;
|
18
|
+
export default PrevTrigger;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourProgressTextProps extends HtmlIngredientProps<'span'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getTourContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: TourProgressTextProps = $props();
|
12
|
+
|
13
|
+
let tour = getTourContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, tour.getProgressTextProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<span {...mergedProps}>
|
22
|
+
{#if children}
|
23
|
+
{@render children?.()}
|
24
|
+
{:else}
|
25
|
+
{tour.getProgressText()}
|
26
|
+
{/if}
|
27
|
+
</span>
|
28
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const ProgressText: $$__sveltets_2_IsomorphicComponent<TourProgressTextProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type ProgressText = InstanceType<typeof ProgressText>;
|
18
|
+
export default ProgressText;
|
@@ -0,0 +1,47 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
+
import type {Snippet} from 'svelte';
|
4
|
+
import type {
|
5
|
+
CreateTourProps,
|
6
|
+
CreateTourReturn,
|
7
|
+
} from './create-tour.svelte.js';
|
8
|
+
|
9
|
+
export interface TourProps extends CreateTourProps, PresenceStrategyProps {
|
10
|
+
children?: Snippet<[CreateTourReturn]>;
|
11
|
+
}
|
12
|
+
</script>
|
13
|
+
|
14
|
+
<script lang="ts">
|
15
|
+
import {
|
16
|
+
setPresenceContext,
|
17
|
+
setPresenceStrategyPropsContext,
|
18
|
+
} from '../presence/context.svelte.js';
|
19
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
20
|
+
import {reflect} from '@zag-js/svelte';
|
21
|
+
import {createSplitProps} from '@zag-js/utils';
|
22
|
+
import {setTourContext} from './context.svelte.js';
|
23
|
+
import {createTour} from './create-tour.svelte.js';
|
24
|
+
|
25
|
+
let {children, ...props}: TourProps = $props();
|
26
|
+
|
27
|
+
let [presenceStrategyProps, tourProps] = $derived(
|
28
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
29
|
+
props,
|
30
|
+
),
|
31
|
+
);
|
32
|
+
|
33
|
+
let tour = createTour(reflect(() => tourProps));
|
34
|
+
|
35
|
+
let presence = createPresence(
|
36
|
+
reflect(() => ({
|
37
|
+
...presenceStrategyProps,
|
38
|
+
present: tour.currentStep != null,
|
39
|
+
})),
|
40
|
+
);
|
41
|
+
|
42
|
+
setTourContext(tour);
|
43
|
+
setPresenceContext(presence);
|
44
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
45
|
+
</script>
|
46
|
+
|
47
|
+
{@render children?.(tour)}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const Root: $$__sveltets_2_IsomorphicComponent<TourProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type Root = InstanceType<typeof Root>;
|
18
|
+
export default Root;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourSkipTriggerProps extends HtmlIngredientProps<'button'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getTourContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: TourSkipTriggerProps = $props();
|
12
|
+
|
13
|
+
let tour = getTourContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, tour.getSkipTriggerProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<button type="button" {...mergedProps}>
|
22
|
+
{@render children?.()}
|
23
|
+
</button>
|
24
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const SkipTrigger: $$__sveltets_2_IsomorphicComponent<TourSkipTriggerProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type SkipTrigger = InstanceType<typeof SkipTrigger>;
|
18
|
+
export default SkipTrigger;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourSpotlightProps extends HtmlIngredientProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getTourContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: TourSpotlightProps = $props();
|
12
|
+
|
13
|
+
let tour = getTourContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, tour.getSpotlightProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<div {...mergedProps}>
|
22
|
+
{@render children?.()}
|
23
|
+
</div>
|
24
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const Spotlight: $$__sveltets_2_IsomorphicComponent<TourSpotlightProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type Spotlight = InstanceType<typeof Spotlight>;
|
18
|
+
export default Spotlight;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TourTitleProps extends HtmlIngredientProps<'h2'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getTourContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: TourTitleProps = $props();
|
12
|
+
|
13
|
+
let tour = getTourContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, tour.getTitleProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<h2 {...mergedProps}>
|
22
|
+
{@render children?.()}
|
23
|
+
</h2>
|
24
|
+
{/if}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
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> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports & {
|
9
|
+
$set?: any;
|
10
|
+
$on?: any;
|
11
|
+
};
|
12
|
+
z_$$bindings?: Bindings;
|
13
|
+
}
|
14
|
+
declare const Title: $$__sveltets_2_IsomorphicComponent<TourTitleProps, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type Title = InstanceType<typeof Title>;
|
18
|
+
export default Title;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
export { default as ArrowTip } from './arrow-tip.svelte';
|
2
|
+
export { default as Arrow } from './arrow.svelte';
|
3
|
+
export { default as CloseTrigger } from './close-trigger.svelte';
|
4
|
+
export { default as Content } from './content.svelte';
|
5
|
+
export { default as Description } from './description.svelte';
|
6
|
+
export { default as NextTrigger } from './next-trigger.svelte';
|
7
|
+
export { default as Overlay } from './overlay.svelte';
|
8
|
+
export { default as Positioner } from './positioner.svelte';
|
9
|
+
export { default as PrevTrigger } from './prev-trigger.svelte';
|
10
|
+
export { default as ProgressText } from './progress-text.svelte';
|
11
|
+
export { default as Root } from './root.svelte';
|
12
|
+
export { default as SkipTrigger } from './skip-trigger.svelte';
|
13
|
+
export { default as Spotlight } from './spotlight.svelte';
|
14
|
+
export { default as Title } from './title.svelte';
|
@@ -0,0 +1,14 @@
|
|
1
|
+
export { default as ArrowTip } from './arrow-tip.svelte';
|
2
|
+
export { default as Arrow } from './arrow.svelte';
|
3
|
+
export { default as CloseTrigger } from './close-trigger.svelte';
|
4
|
+
export { default as Content } from './content.svelte';
|
5
|
+
export { default as Description } from './description.svelte';
|
6
|
+
export { default as NextTrigger } from './next-trigger.svelte';
|
7
|
+
export { default as Overlay } from './overlay.svelte';
|
8
|
+
export { default as Positioner } from './positioner.svelte';
|
9
|
+
export { default as PrevTrigger } from './prev-trigger.svelte';
|
10
|
+
export { default as ProgressText } from './progress-text.svelte';
|
11
|
+
export { default as Root } from './root.svelte';
|
12
|
+
export { default as SkipTrigger } from './skip-trigger.svelte';
|
13
|
+
export { default as Spotlight } from './spotlight.svelte';
|
14
|
+
export { default as Title } from './title.svelte';
|
@@ -18,14 +18,14 @@
|
|
18
18
|
|
19
19
|
let treeView = getTreeViewContext();
|
20
20
|
|
21
|
-
let [branchProps,
|
21
|
+
let [branchProps, localProps] = $derived(
|
22
22
|
createSplitProps<BranchProps>(['depth', 'value', 'disabled'])(props),
|
23
23
|
);
|
24
24
|
|
25
25
|
let branchState = $derived(treeView.getBranchState(branchProps));
|
26
26
|
|
27
27
|
let mergedProps = $derived(
|
28
|
-
mergeProps(
|
28
|
+
mergeProps(localProps, treeView.getBranchProps(branchProps)),
|
29
29
|
);
|
30
30
|
|
31
31
|
setTreeViewBranchPropsContext(() => branchProps);
|