@ark-ui/svelte 0.4.0 → 5.0.0-0

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

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

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

@@ -0,0 +1,20 @@
+export type { StepChangeDetails as StepsStepChangeDetails } from '@zag-js/steps';
+export { default as StepsCompletedContent, type StepsCompletedContentBaseProps, type StepsCompletedContentProps, } from './steps-completed-content.svelte';
+export { default as StepsContent, type StepsContentBaseProps, type StepsContentProps } from './steps-content.svelte';
+export { default as StepsContext, type StepsContextProps } from './steps-context.svelte';
+export { default as StepsIndicator, type StepsIndicatorBaseProps, type StepsIndicatorProps, } from './steps-indicator.svelte';
+export { default as StepsItem, type StepsItemBaseProps, type StepsItemProps } from './steps-item.svelte';
+export { default as StepsItemContext, type StepsItemContextProps } from './steps-item-context.svelte';
+export { default as StepsList, type StepsListBaseProps, type StepsListProps } from './steps-list.svelte';
+export { default as StepsNextTrigger, type StepsNextTriggerBaseProps, type StepsNextTriggerProps, } from './steps-next-trigger.svelte';
+export { default as StepsPrevTrigger, type StepsPrevTriggerBaseProps, type StepsPrevTriggerProps, } from './steps-prev-trigger.svelte';
+export { default as StepsProgress, type StepsProgressBaseProps, type StepsProgressProps } from './steps-progress.svelte';
+export { default as StepsRoot, type StepsRootBaseProps, type StepsRootProps } from './steps-root.svelte';
+export { default as StepsRootProvider, type StepsRootProviderBaseProps, type StepsRootProviderProps, } from './steps-root-provider.svelte';
+export { default as StepsSeparator, type StepsSeparatorBaseProps, type StepsSeparatorProps, } from './steps-separator.svelte';
+export { default as StepsTrigger, type StepsTriggerBaseProps, type StepsTriggerProps } from './steps-trigger.svelte';
+export { stepsAnatomy } from './steps.anatomy';
+export { useSteps, type UseStepsProps, type UseStepsReturn } from './use-steps.svelte';
+export { useStepsContext, type UseStepsContext } from './use-steps-context';
+export { useStepsItemContext, type UseStepsItemContext } from './use-steps-item-context';
+export * as Steps from './steps';

package/dist/components/steps/index.js

@@ -0,0 +1,19 @@
+export { default as StepsCompletedContent, } from './steps-completed-content.svelte';
+export { default as StepsContent } from './steps-content.svelte';
+export { default as StepsContext } from './steps-context.svelte';
+export { default as StepsIndicator, } from './steps-indicator.svelte';
+export { default as StepsItem } from './steps-item.svelte';
+export { default as StepsItemContext } from './steps-item-context.svelte';
+export { default as StepsList } from './steps-list.svelte';
+export { default as StepsNextTrigger, } from './steps-next-trigger.svelte';
+export { default as StepsPrevTrigger, } from './steps-prev-trigger.svelte';
+export { default as StepsProgress } from './steps-progress.svelte';
+export { default as StepsRoot } from './steps-root.svelte';
+export { default as StepsRootProvider, } from './steps-root-provider.svelte';
+export { default as StepsSeparator, } from './steps-separator.svelte';
+export { default as StepsTrigger } from './steps-trigger.svelte';
+export { stepsAnatomy } from './steps.anatomy';
+export { useSteps } from './use-steps.svelte';
+export { useStepsContext } from './use-steps-context';
+export { useStepsItemContext } from './use-steps-item-context';
+export * as Steps from './steps';

package/dist/components/steps/steps-completed-content.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsCompletedContentBaseProps extends PolymorphicProps<'div'> {}
+  export interface StepsCompletedContentProps extends Assign<HTMLProps<'div'>, StepsCompletedContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+
+  const props: StepsCompletedContentProps = $props()
+
+  const steps = useStepsContext()
+  const mergedProps = $derived(mergeProps(steps().getContentProps({ index: steps().count }), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/steps/steps-completed-content.svelte.d.ts

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

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

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { ItemProps } from '@zag-js/steps'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsContentBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface StepsContentProps extends Assign<HTMLProps<'div'>, StepsContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+
+  const props: StepsContentProps = $props()
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['index']))
+
+  const steps = useStepsContext()
+  const mergedProps = $derived(mergeProps(steps().getContentProps(itemProps), localProps))
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { ItemProps } from '@zag-js/steps';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface StepsContentBaseProps extends ItemProps, PolymorphicProps<'div'> {
+}
+export interface StepsContentProps extends Assign<HTMLProps<'div'>, StepsContentBaseProps> {
+}
+declare const StepsContent: import("svelte").Component<StepsContentProps, {}, "">;
+type StepsContent = ReturnType<typeof StepsContent>;
+export default StepsContent;

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseStepsContext } from './use-steps-context'
+
+  export interface StepsContextProps {
+    render: Snippet<[UseStepsContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useStepsContext } from './use-steps-context'
+
+  let { render }: StepsContextProps = $props()
+
+  const stepsContext = useStepsContext()
+</script>
+
+{@render render(stepsContext)}

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

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

package/dist/components/steps/steps-indicator.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface StepsIndicatorProps extends Assign<HTMLProps<'div'>, StepsIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+  import { useStepsItemPropsContext } from './use-steps-item-props-context'
+
+  const props: StepsIndicatorProps = $props()
+
+  const steps = useStepsContext()
+  const itemProps = useStepsItemPropsContext()
+  const mergedProps = $derived(mergeProps(steps().getIndicatorProps(itemProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/steps/steps-indicator.svelte.d.ts

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

package/dist/components/steps/steps-item-context.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { UseStepsItemContext } from './use-steps-item-context.js'
+
+  export interface StepsItemContextProps {
+    render: Snippet<[UseStepsItemContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useStepsItemContext } from './use-steps-item-context.js'
+
+  let { render }: StepsItemContextProps = $props()
+
+  const context = useStepsItemContext()
+</script>
+
+{@render render(context)}

package/dist/components/steps/steps-item-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseStepsItemContext } from './use-steps-item-context.js';
+export interface StepsItemContextProps {
+    render: Snippet<[UseStepsItemContext]>;
+}
+declare const StepsItemContext: import("svelte").Component<StepsItemContextProps, {}, "">;
+type StepsItemContext = ReturnType<typeof StepsItemContext>;
+export default StepsItemContext;

package/dist/components/steps/steps-item.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { ItemProps } from '@zag-js/steps'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface StepsItemProps extends Assign<HTMLProps<'div'>, StepsItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+  import { StepsItemProvider } from './use-steps-item-context'
+  import { StepsItemPropsProvider } from './use-steps-item-props-context'
+
+  const props: StepsItemProps = $props()
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['index']))
+
+  const steps = useStepsContext()
+  const itemState = $derived(steps().getItemState(itemProps))
+  const mergedProps = $derived(mergeProps(steps().getItemProps(itemProps), localProps))
+
+  StepsItemPropsProvider(() => itemProps)
+  StepsItemProvider(() => itemState)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/steps/steps-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ItemProps } from '@zag-js/steps';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface StepsItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+}
+export interface StepsItemProps extends Assign<HTMLProps<'div'>, StepsItemBaseProps> {
+}
+declare const StepsItem: import("svelte").Component<StepsItemProps, {}, "">;
+type StepsItem = ReturnType<typeof StepsItem>;
+export default StepsItem;

package/dist/components/steps/steps-list.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsListBaseProps extends PolymorphicProps<'ol'> {}
+  export interface StepsListProps extends Assign<HTMLProps<'ol'>, StepsListBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+
+  const props: StepsListProps = $props()
+
+  const steps = useStepsContext()
+  const mergedProps = $derived(mergeProps(steps().getListProps(), props))
+</script>
+
+<Ark as="ol" {...mergedProps} />

package/dist/components/steps/steps-list.svelte.d.ts

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

package/dist/components/steps/steps-next-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsNextTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface StepsNextTriggerProps extends Assign<HTMLProps<'button'>, StepsNextTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+
+  const props: StepsNextTriggerProps = $props()
+
+  const steps = useStepsContext()
+  const mergedProps = $derived(mergeProps(steps().getNextTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/steps/steps-next-trigger.svelte.d.ts

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

package/dist/components/steps/steps-prev-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsPrevTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface StepsPrevTriggerProps extends Assign<HTMLProps<'button'>, StepsPrevTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+
+  const props: StepsPrevTriggerProps = $props()
+
+  const steps = useStepsContext()
+  const mergedProps = $derived(mergeProps(steps().getPrevTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/steps/steps-prev-trigger.svelte.d.ts

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

package/dist/components/steps/steps-progress.svelte

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

package/dist/components/steps/steps-progress.svelte.d.ts

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

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

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseStepsReturn } from './use-steps.svelte'
+
+  export interface StepsRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseStepsReturn
+  }
+  export interface StepsRootProviderProps extends Assign<HTMLProps<'div'>, StepsRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { StepsProvider } from './use-steps-context'
+
+  let { value, ...props }: StepsRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  StepsProvider(value)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseStepsReturn } from './use-steps.svelte';
+export interface StepsRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseStepsReturn;
+}
+export interface StepsRootProviderProps extends Assign<HTMLProps<'div'>, StepsRootProviderBaseProps> {
+}
+declare const StepsRootProvider: import("svelte").Component<StepsRootProviderProps, {}, "">;
+type StepsRootProvider = ReturnType<typeof StepsRootProvider>;
+export default StepsRootProvider;

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

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseStepsProps } from './use-steps.svelte'
+
+  export interface StepsRootBaseProps extends UseStepsProps, PolymorphicProps<'div'> {}
+  export interface StepsRootProps extends Assign<HTMLProps<'div'>, StepsRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useSteps } from './use-steps.svelte'
+  import { StepsProvider } from './use-steps-context'
+
+  let { step = $bindable(), ...props }: StepsRootProps = $props()
+  const providedId = $props.id()
+
+  const [useStepsProps, localProps] = $derived(
+    createSplitProps<UseStepsProps>()(props, [
+      'defaultStep',
+      'id',
+      'ids',
+      'count',
+      'linear',
+      'onStepChange',
+      'onStepComplete',
+      'orientation',
+      'step',
+    ]),
+  )
+
+  const resolvedProps = $derived<UseStepsProps>({
+    ...useStepsProps,
+    id: useStepsProps.id ?? providedId,
+    step,
+    onStepChange(details) {
+      useStepsProps.onStepChange?.(details)
+      if (step !== undefined) step = details.step
+    },
+  })
+
+  const stepsApi = useSteps(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(stepsApi().getRootProps(), localProps))
+
+  StepsProvider(stepsApi)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseStepsProps } from './use-steps.svelte';
+export interface StepsRootBaseProps extends UseStepsProps, PolymorphicProps<'div'> {
+}
+export interface StepsRootProps extends Assign<HTMLProps<'div'>, StepsRootBaseProps> {
+}
+declare const StepsRoot: import("svelte").Component<StepsRootProps, {}, "step">;
+type StepsRoot = ReturnType<typeof StepsRoot>;
+export default StepsRoot;

package/dist/components/steps/steps-separator.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsSeparatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface StepsSeparatorProps extends Assign<HTMLProps<'div'>, StepsSeparatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+  import { useStepsItemPropsContext } from './use-steps-item-props-context'
+
+  const props: StepsSeparatorProps = $props()
+
+  const steps = useStepsContext()
+  const itemProps = useStepsItemPropsContext()
+  const mergedProps = $derived(mergeProps(steps().getSeparatorProps(itemProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/steps/steps-separator.svelte.d.ts

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

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

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface StepsTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface StepsTriggerProps extends Assign<HTMLProps<'button'>, StepsTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useStepsContext } from './use-steps-context'
+  import { useStepsItemPropsContext } from './use-steps-item-props-context'
+
+  const props: StepsTriggerProps = $props()
+
+  const steps = useStepsContext()
+  const itemProps = useStepsItemPropsContext()
+  const mergedProps = $derived(mergeProps(steps().getTriggerProps(itemProps()), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

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

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

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

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

package/dist/components/steps/steps.anatomy.js

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

package/dist/components/steps/steps.d.ts

@@ -0,0 +1,15 @@
+export type { StepChangeDetails } from '@zag-js/steps';
+export { default as CompletedContent, type StepsCompletedContentBaseProps as CompletedContentBaseProps, type StepsCompletedContentProps as CompletedContentProps, } from './steps-completed-content.svelte';
+export { default as Content, type StepsContentBaseProps as ContentBaseProps, type StepsContentProps as ContentProps, } from './steps-content.svelte';
+export { default as Context, type StepsContextProps as ContextProps } from './steps-context.svelte';
+export { default as Indicator, type StepsIndicatorBaseProps as IndicatorBaseProps, type StepsIndicatorProps as IndicatorProps, } from './steps-indicator.svelte';
+export { default as Item, type StepsItemBaseProps as ItemBaseProps, type StepsItemProps as ItemProps, } from './steps-item.svelte';
+export { default as ItemContext, type StepsItemContextProps as ItemContextProps } from './steps-item-context.svelte';
+export { default as List, type StepsListBaseProps as ListBaseProps, type StepsListProps as ListProps, } from './steps-list.svelte';
+export { default as NextTrigger, type StepsNextTriggerBaseProps as NextTriggerBaseProps, type StepsNextTriggerProps as NextTriggerProps, } from './steps-next-trigger.svelte';
+export { default as PrevTrigger, type StepsPrevTriggerBaseProps as PrevTriggerBaseProps, type StepsPrevTriggerProps as PrevTriggerProps, } from './steps-prev-trigger.svelte';
+export { default as Progress, type StepsProgressBaseProps as ProgressBaseProps, type StepsProgressProps as ProgressProps, } from './steps-progress.svelte';
+export { default as Root, type StepsRootBaseProps as RootBaseProps, type StepsRootProps as RootProps, } from './steps-root.svelte';
+export { default as RootProvider, type StepsRootProviderBaseProps as RootProviderBaseProps, type StepsRootProviderProps as RootProviderProps, } from './steps-root-provider.svelte';
+export { default as Separator, type StepsSeparatorBaseProps as SeparatorBaseProps, type StepsSeparatorProps as SeparatorProps, } from './steps-separator.svelte';
+export { default as Trigger, type StepsTriggerBaseProps as TriggerBaseProps, type StepsTriggerProps as TriggerProps, } from './steps-trigger.svelte';

package/dist/components/steps/steps.js

@@ -0,0 +1,14 @@
+export { default as CompletedContent, } from './steps-completed-content.svelte';
+export { default as Content, } from './steps-content.svelte';
+export { default as Context } from './steps-context.svelte';
+export { default as Indicator, } from './steps-indicator.svelte';
+export { default as Item, } from './steps-item.svelte';
+export { default as ItemContext } from './steps-item-context.svelte';
+export { default as List, } from './steps-list.svelte';
+export { default as NextTrigger, } from './steps-next-trigger.svelte';
+export { default as PrevTrigger, } from './steps-prev-trigger.svelte';
+export { default as Progress, } from './steps-progress.svelte';
+export { default as Root, } from './steps-root.svelte';
+export { default as RootProvider, } from './steps-root-provider.svelte';
+export { default as Separator, } from './steps-separator.svelte';
+export { default as Trigger, } from './steps-trigger.svelte';

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

@@ -0,0 +1,4 @@
+import type { UseStepsReturn } from './use-steps.svelte';
+export interface UseStepsContext extends UseStepsReturn {
+}
+export declare const StepsProvider: (opts: UseStepsContext) => void, useStepsContext: (fallback?: UseStepsContext | undefined) => UseStepsContext;

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

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [StepsProvider, useStepsContext] = createContext({
+    name: 'StepsContext',
+    hookName: 'useStepsContext',
+    providerName: '<StepsProvider />',
+});

package/dist/components/steps/use-steps-item-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { ItemState } from '@zag-js/steps';
+export interface UseStepsItemContext extends Accessor<ItemState> {
+}
+export declare const StepsItemProvider: (opts: UseStepsItemContext) => void, useStepsItemContext: (fallback?: UseStepsItemContext | undefined) => UseStepsItemContext;

package/dist/components/steps/use-steps-item-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [StepsItemProvider, useStepsItemContext] = createContext({
+    name: 'StepsItemContext',
+    hookName: 'useStepsItemContext',
+    providerName: '<StepsItemProvider />',
+});

package/dist/components/steps/use-steps-item-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { ItemProps } from '@zag-js/steps';
+export interface UseStepsItemPropsContext extends Accessor<ItemProps> {
+}
+export declare const StepsItemPropsProvider: (opts: UseStepsItemPropsContext) => void, useStepsItemPropsContext: (fallback?: UseStepsItemPropsContext | undefined) => UseStepsItemPropsContext;

package/dist/components/steps/use-steps-item-props-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [StepsItemPropsProvider, useStepsItemPropsContext] = createContext({
+    name: 'StepsItemPropsContext',
+    hookName: 'useStepsItemPropsContext',
+    providerName: '<StepsItemPropsProvider />',
+});