@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/tooltip/tooltip-arrow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TooltipArrowBaseProps extends PolymorphicProps<'div'> {
+}
+export interface TooltipArrowProps extends Assign<HTMLProps<'div'>, TooltipArrowBaseProps> {
+}
+declare const TooltipArrow: import("svelte").Component<TooltipArrowProps, {}, "">;
+type TooltipArrow = ReturnType<typeof TooltipArrow>;
+export default TooltipArrow;

package/dist/components/tooltip/tooltip-content.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TooltipContentBaseProps extends PolymorphicProps<'div'> {
+    ref?: Element | null
+  }
+  export interface TooltipContentProps extends Assign<HTMLProps<'div'>, TooltipContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useTooltipContext } from './use-tooltip-context'
+
+  let { ref = $bindable<Element | null>(), ...props }: TooltipContentProps = $props()
+
+  const tooltip = useTooltipContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(tooltip().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    ref = node
+    presence().setNode(node)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TooltipContentBaseProps extends PolymorphicProps<'div'> {
+    ref?: Element | null;
+}
+export interface TooltipContentProps extends Assign<HTMLProps<'div'>, TooltipContentBaseProps> {
+}
+declare const TooltipContent: import("svelte").Component<TooltipContentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/components/tooltip/tooltip-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseTooltipContext } from './use-tooltip-context'
+
+  export interface TooltipContextProps {
+    render?: Snippet<[UseTooltipContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useTooltipContext } from './use-tooltip-context'
+
+  const { render }: TooltipContextProps = $props()
+
+  const context = useTooltipContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/tooltip/tooltip-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseTooltipContext } from './use-tooltip-context';
+export interface TooltipContextProps {
+    render?: Snippet<[UseTooltipContext]>;
+}
+declare const TooltipContext: import("svelte").Component<TooltipContextProps, {}, "">;
+type TooltipContext = ReturnType<typeof TooltipContext>;
+export default TooltipContext;

package/dist/components/tooltip/tooltip-positioner.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TooltipPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface TooltipPositionerProps extends Assign<HTMLProps<'div'>, TooltipPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useTooltipContext } from './use-tooltip-context'
+
+  const props: TooltipPositionerProps = $props()
+  const tooltip = useTooltipContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(tooltip().getPositionerProps(), props))
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} />
+{/if}

package/dist/components/tooltip/tooltip-positioner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TooltipPositionerBaseProps extends PolymorphicProps<'div'> {
+}
+export interface TooltipPositionerProps extends Assign<HTMLProps<'div'>, TooltipPositionerBaseProps> {
+}
+declare const TooltipPositioner: import("svelte").Component<TooltipPositionerProps, {}, "">;
+type TooltipPositioner = ReturnType<typeof TooltipPositioner>;
+export default TooltipPositioner;

package/dist/components/tooltip/tooltip-root-provider.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseTooltipReturn } from './use-tooltip.svelte'
+
+  interface RootProviderProps {
+    value: UseTooltipReturn
+  }
+
+  export interface TooltipRootProviderBaseProps extends RootProviderProps, UsePresenceProps {}
+  export interface TooltipRootProviderProps extends TooltipRootProviderBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { PresenceProvider, usePresence } from '../presence'
+  import { splitPresenceProps } from '../presence/split-presence-props.svelte'
+  import { TooltipProvider } from './use-tooltip-context'
+
+  const props: TooltipRootProviderProps = $props()
+
+  const [presenceProps, rootProviderProps] = $derived(splitPresenceProps(props))
+
+  const machineProps = $derived.by<UsePresenceProps>(() => ({
+    ...presenceProps,
+    present: rootProviderProps.value().open,
+  }))
+
+  const presence = usePresence(() => machineProps)
+
+  TooltipProvider(() => rootProviderProps.value())
+  PresenceProvider(presence)
+</script>
+
+{@render props.children?.()}

package/dist/components/tooltip/tooltip-root-provider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { UsePresenceProps } from '../presence';
+import type { UseTooltipReturn } from './use-tooltip.svelte';
+interface RootProviderProps {
+    value: UseTooltipReturn;
+}
+export interface TooltipRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+}
+export interface TooltipRootProviderProps extends TooltipRootProviderBaseProps {
+    children?: Snippet;
+}
+declare const TooltipRootProvider: import("svelte").Component<TooltipRootProviderProps, {}, "">;
+type TooltipRootProvider = ReturnType<typeof TooltipRootProvider>;
+export default TooltipRootProvider;

package/dist/components/tooltip/tooltip-root.svelte

@@ -0,0 +1,45 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseTooltipProps } from './use-tooltip.svelte'
+
+  export interface TooltipRootBaseProps extends UseTooltipProps, UsePresenceProps {}
+  export interface TooltipRootProps extends TooltipRootBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { PresenceProvider, usePresence } from '../presence'
+  import { splitPresenceProps } from '../presence/split-presence-props.svelte'
+  import { TooltipProvider } from './use-tooltip-context'
+  import { useTooltip } from './use-tooltip.svelte'
+
+  let { open = $bindable(), ...props }: TooltipRootProps = $props()
+  const providedId = $props.id()
+
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+  const { children, ...useTooltipProps } = $derived(localProps)
+
+  const resolvedProps = $derived<UseTooltipProps>({
+    ...useTooltipProps,
+    id: providedId,
+    onOpenChange(details) {
+      useTooltipProps.onOpenChange?.(details)
+      open = details.open
+    },
+  })
+
+  const tooltip = useTooltip(() => resolvedProps)
+  const machineProps = $derived<UsePresenceProps>({
+    ...presenceProps,
+    present: tooltip().open,
+  })
+
+  const presence = usePresence(() => machineProps)
+
+  TooltipProvider(tooltip)
+  PresenceProvider(presence)
+</script>
+
+{@render children?.()}

package/dist/components/tooltip/tooltip-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { UsePresenceProps } from '../presence';
+import type { UseTooltipProps } from './use-tooltip.svelte';
+export interface TooltipRootBaseProps extends UseTooltipProps, UsePresenceProps {
+}
+export interface TooltipRootProps extends TooltipRootBaseProps {
+    children?: Snippet;
+}
+declare const TooltipRoot: import("svelte").Component<TooltipRootProps, {}, "open">;
+type TooltipRoot = ReturnType<typeof TooltipRoot>;
+export default TooltipRoot;

package/dist/components/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TooltipTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface TooltipTriggerProps extends Assign<HTMLProps<'button'>, TooltipTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTooltipContext } from './use-tooltip-context'
+
+  const props: TooltipTriggerProps = $props()
+  const tooltip = useTooltipContext()
+  const mergedProps = $derived(mergeProps(tooltip().getTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/tooltip/tooltip-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TooltipTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface TooltipTriggerProps extends Assign<HTMLProps<'button'>, TooltipTriggerBaseProps> {
+}
+declare const TooltipTrigger: import("svelte").Component<TooltipTriggerProps, {}, "">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/components/tooltip/tooltip.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';

package/dist/components/tooltip/tooltip.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,9 @@
+export type { OpenChangeDetails } from '@zag-js/tooltip';
+export { default as Arrow, type TooltipArrowBaseProps as ArrowBaseProps, type TooltipArrowProps as ArrowProps, } from './tooltip-arrow.svelte';
+export { default as ArrowTip, type TooltipArrowTipBaseProps as ArrowTipBaseProps, type TooltipArrowTipProps as ArrowTipProps, } from './tooltip-arrow-tip.svelte';
+export { default as Content, type TooltipContentBaseProps as ContentBaseProps, type TooltipContentProps as ContentProps, } from './tooltip-content.svelte';
+export { default as Context, type TooltipContextProps as ContextProps } from './tooltip-context.svelte';
+export { default as Positioner, type TooltipPositionerBaseProps as PositionerBaseProps, type TooltipPositionerProps as PositionerProps, } from './tooltip-positioner.svelte';
+export { default as Root, type TooltipRootBaseProps as RootBaseProps, type TooltipRootProps as RootProps, } from './tooltip-root.svelte';
+export { default as RootProvider, type TooltipRootProviderBaseProps as RootProviderBaseProps, type TooltipRootProviderProps as RootProviderProps, } from './tooltip-root-provider.svelte';
+export { default as Trigger, type TooltipTriggerBaseProps as TriggerBaseProps, type TooltipTriggerProps as TriggerProps, } from './tooltip-trigger.svelte';

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,8 @@
+export { default as Arrow, } from './tooltip-arrow.svelte';
+export { default as ArrowTip, } from './tooltip-arrow-tip.svelte';
+export { default as Content, } from './tooltip-content.svelte';
+export { default as Context } from './tooltip-context.svelte';
+export { default as Positioner, } from './tooltip-positioner.svelte';
+export { default as Root, } from './tooltip-root.svelte';
+export { default as RootProvider, } from './tooltip-root-provider.svelte';
+export { default as Trigger, } from './tooltip-trigger.svelte';

package/dist/components/tooltip/use-tooltip-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseTooltipReturn } from './use-tooltip.svelte';
+export interface UseTooltipContext extends UseTooltipReturn {
+}
+export declare const TooltipProvider: (opts: UseTooltipContext) => void, useTooltipContext: (fallback?: UseTooltipContext | undefined) => UseTooltipContext;

package/dist/components/tooltip/use-tooltip-context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [TooltipProvider, useTooltipContext] = createContext({
+    name: 'TooltipContext',
+});

package/dist/components/tooltip/use-tooltip.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor } from '../../types';
+import { type PropTypes } from '@zag-js/svelte';
+import * as tooltip from '@zag-js/tooltip';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseTooltipProps extends Omit<tooltip.Props, 'dir' | 'getRootNode'> {
+}
+export interface UseTooltipReturn extends Accessor<tooltip.Api<PropTypes>> {
+}
+export declare const useTooltip: (props?: MaybeFunction<UseTooltipProps>) => UseTooltipReturn;

package/dist/components/tooltip/use-tooltip.svelte.js

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import * as tooltip from '@zag-js/tooltip';
+import { runIfFn } from '@zag-js/utils';
+export const useTooltip = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(tooltip.machine, () => machineProps);
+    const api = $derived(tooltip.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/tour/index.d.ts

@@ -0,0 +1,20 @@
+export type { StepDetails as TourStepDetails } from '@zag-js/tour';
+export { default as TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps, } from './tour-action-trigger.svelte';
+export { default as TourActions, type TourActionsProps } from './tour-actions.svelte';
+export { default as TourArrowTip, type TourArrowTipBaseProps, type TourArrowTipProps } from './tour-arrow-tip.svelte';
+export { default as TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow.svelte';
+export { default as TourBackdrop, type TourBackdropBaseProps, type TourBackdropProps } from './tour-backdrop.svelte';
+export { default as TourCloseTrigger, type TourCloseTriggerBaseProps, type TourCloseTriggerProps, } from './tour-close-trigger.svelte';
+export { default as TourContent, type TourContentBaseProps, type TourContentProps } from './tour-content.svelte';
+export { default as TourContext, type TourContextProps } from './tour-context.svelte';
+export { default as TourControl, type TourControlBaseProps, type TourControlProps } from './tour-control.svelte';
+export { default as TourDescription, type TourDescriptionBaseProps, type TourDescriptionProps, } from './tour-description.svelte';
+export { default as TourPositioner, type TourPositionerBaseProps, type TourPositionerProps, } from './tour-positioner.svelte';
+export { default as TourProgressText, type TourProgressTextBaseProps, type TourProgressTextProps, } from './tour-progress-text.svelte';
+export { default as TourRoot, type TourRootBaseProps, type TourRootProps } from './tour-root.svelte';
+export { default as TourSpotlight, type TourSpotlightBaseProps, type TourSpotlightProps } from './tour-spotlight.svelte';
+export { default as TourTitle, type TourTitleBaseProps, type TourTitleProps } from './tour-title.svelte';
+export { tourAnatomy } from './tour.anatomy';
+export { useTourContext, type UseTourContext } from './use-tour-context';
+export { useTour, type UseTourProps, type UseTourReturn } from './use-tour.svelte';
+export * as Tour from './tour';

package/dist/components/tour/index.js

@@ -0,0 +1,19 @@
+export { default as TourActionTrigger, } from './tour-action-trigger.svelte';
+export { default as TourActions } from './tour-actions.svelte';
+export { default as TourArrowTip } from './tour-arrow-tip.svelte';
+export { default as TourArrow } from './tour-arrow.svelte';
+export { default as TourBackdrop } from './tour-backdrop.svelte';
+export { default as TourCloseTrigger, } from './tour-close-trigger.svelte';
+export { default as TourContent } from './tour-content.svelte';
+export { default as TourContext } from './tour-context.svelte';
+export { default as TourControl } from './tour-control.svelte';
+export { default as TourDescription, } from './tour-description.svelte';
+export { default as TourPositioner, } from './tour-positioner.svelte';
+export { default as TourProgressText, } from './tour-progress-text.svelte';
+export { default as TourRoot } from './tour-root.svelte';
+export { default as TourSpotlight } from './tour-spotlight.svelte';
+export { default as TourTitle } from './tour-title.svelte';
+export { tourAnatomy } from './tour.anatomy';
+export { useTourContext } from './use-tour-context';
+export { useTour } from './use-tour.svelte';
+export * as Tour from './tour';

package/dist/components/tour/tour-action-trigger.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { StepActionTriggerProps } from '@zag-js/tour'
+
+  export interface TourActionTriggerBaseProps extends StepActionTriggerProps, PolymorphicProps<'button'> {}
+  export interface TourActionTriggerProps extends HTMLProps<'button'>, TourActionTriggerBaseProps {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTourContext } from './use-tour-context'
+
+  const props: TourActionTriggerProps = $props()
+  const [actionTriggerProps, localProps] = createSplitProps<StepActionTriggerProps>()(props, ['action'])
+
+  const tour = useTourContext()
+
+  const mergedProps = $derived(mergeProps(tour().getActionTriggerProps(actionTriggerProps), localProps))
+</script>
+
+<Ark as="button" {...mergedProps}>
+  {#if localProps.children}
+    {@render localProps.children()}
+  {:else}
+    {actionTriggerProps.action.label}
+  {/if}
+</Ark>

package/dist/components/tour/tour-action-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLProps, PolymorphicProps } from '../../types';
+import type { StepActionTriggerProps } from '@zag-js/tour';
+export interface TourActionTriggerBaseProps extends StepActionTriggerProps, PolymorphicProps<'button'> {
+}
+export interface TourActionTriggerProps extends HTMLProps<'button'>, TourActionTriggerBaseProps {
+}
+declare const TourActionTrigger: import("svelte").Component<TourActionTriggerProps, {}, "">;
+type TourActionTrigger = ReturnType<typeof TourActionTrigger>;
+export default TourActionTrigger;

package/dist/components/tour/tour-actions.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Accessor } from '../../types'
+  import type { StepAction } from '@zag-js/tour'
+  import type { Snippet } from 'svelte'
+  import { useTourContext } from './use-tour-context'
+
+  export interface TourActionsProps {
+    children: Snippet<[Accessor<StepAction[]>]>
+  }
+
+  const { children }: TourActionsProps = $props()
+
+  const tour = useTourContext()
+  const actions = $derived(tour().step?.actions ?? [])
+</script>
+
+{@render children(() => actions)}

package/dist/components/tour/tour-actions.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor } from '../../types';
+import type { StepAction } from '@zag-js/tour';
+import type { Snippet } from 'svelte';
+export interface TourActionsProps {
+    children: Snippet<[Accessor<StepAction[]>]>;
+}
+declare const TourActions: import("svelte").Component<TourActionsProps, {}, "">;
+type TourActions = ReturnType<typeof TourActions>;
+export default TourActions;

package/dist/components/tour/tour-arrow-tip.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TourArrowTipBaseProps extends PolymorphicProps<'div'> {}
+  export interface TourArrowTipProps extends HTMLProps<'div'>, TourArrowTipBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTourContext } from './use-tour-context'
+
+  const props: TourArrowTipProps = $props()
+
+  const tour = useTourContext()
+  const mergedProps = $derived(mergeProps(tour().getArrowTipProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tour/tour-arrow-tip.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps } from '../../types';
+export interface TourArrowTipBaseProps extends PolymorphicProps<'div'> {
+}
+export interface TourArrowTipProps extends HTMLProps<'div'>, TourArrowTipBaseProps {
+}
+declare const TourArrowTip: import("svelte").Component<TourArrowTipProps, {}, "">;
+type TourArrowTip = ReturnType<typeof TourArrowTip>;
+export default TourArrowTip;

package/dist/components/tour/tour-arrow.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TourArrowBaseProps extends PolymorphicProps<'div'> {}
+  export interface TourArrowProps extends HTMLProps<'div'>, TourArrowBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTourContext } from './use-tour-context'
+
+  const props: TourArrowProps = $props()
+
+  const tour = useTourContext()
+
+  const mergedProps = $derived(mergeProps(tour().getArrowProps(), props))
+</script>
+
+{#if tour().step?.arrow}
+  <Ark as="div" {...mergedProps} />
+{/if}

package/dist/components/tour/tour-arrow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps } from '../../types';
+export interface TourArrowBaseProps extends PolymorphicProps<'div'> {
+}
+export interface TourArrowProps extends HTMLProps<'div'>, TourArrowBaseProps {
+}
+declare const TourArrow: import("svelte").Component<TourArrowProps, {}, "">;
+type TourArrow = ReturnType<typeof TourArrow>;
+export default TourArrow;

package/dist/components/tour/tour-backdrop.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface TourBackdropBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface TourBackdropProps extends HTMLProps<'div'>, TourBackdropBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresence } from '../presence'
+  import { useTourContext } from './use-tour-context'
+  import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+
+  let { ref = $bindable(), ...props }: TourBackdropProps = $props()
+  const renderStrategyProps = useRenderStrategyPropsContext()
+
+  const tour = useTourContext()
+  const presence = usePresence(() => ({
+    ...renderStrategyProps,
+    present: tour().open,
+  }))
+
+  const mergedProps = $derived(mergeProps(tour().getBackdropProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+    ref = node
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} {@attach setNode} hidden={!tour().step?.backdrop} />
+{/if}

package/dist/components/tour/tour-backdrop.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface TourBackdropBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface TourBackdropProps extends HTMLProps<'div'>, TourBackdropBaseProps {
+}
+declare const TourBackdrop: import("svelte").Component<TourBackdropProps, {}, "ref">;
+type TourBackdrop = ReturnType<typeof TourBackdrop>;
+export default TourBackdrop;

package/dist/components/tour/tour-close-trigger.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TourCloseTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface TourCloseTriggerProps extends HTMLProps<'button'>, TourCloseTriggerBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTourContext } from './use-tour-context'
+
+  const props: TourCloseTriggerProps = $props()
+
+  const tour = useTourContext()
+
+  const mergedProps = $derived(mergeProps(tour().getCloseTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/tour/tour-close-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps } from '../../types';
+export interface TourCloseTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface TourCloseTriggerProps extends HTMLProps<'button'>, TourCloseTriggerBaseProps {
+}
+declare const TourCloseTrigger: import("svelte").Component<TourCloseTriggerProps, {}, "">;
+type TourCloseTrigger = ReturnType<typeof TourCloseTrigger>;
+export default TourCloseTrigger;

package/dist/components/tour/tour-content.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface TourContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface TourContentProps extends HTMLProps<'div'>, TourContentBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useTourContext } from './use-tour-context'
+
+  let { ref = $bindable(), ...props }: TourContentProps = $props()
+
+  const tour = useTourContext()
+  const presence = usePresenceContext()
+
+  const mergedProps = $derived(mergeProps(tour().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+    ref = node
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/tour/tour-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface TourContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface TourContentProps extends HTMLProps<'div'>, TourContentBaseProps {
+}
+declare const TourContent: import("svelte").Component<TourContentProps, {}, "ref">;
+type TourContent = ReturnType<typeof TourContent>;
+export default TourContent;

package/dist/components/tour/tour-context.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { useTourContext, type UseTourContext } from './use-tour-context'
+
+  export interface TourContextProps {
+    render: Snippet<[UseTourContext]>
+  }
+
+  let { render }: TourContextProps = $props()
+
+  const tour = useTourContext()
+</script>
+
+{@render render(tour)}