ui-ingredients 0.0.51 → 0.0.53

package/dist/slider/slider-track.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderTrackProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SliderTrack: $$__sveltets_2_IsomorphicComponent<SliderTrackProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SliderTrack = InstanceType<typeof SliderTrack>;
+export default SliderTrack;

package/dist/slider/slider-value-text.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderValueTextProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSliderContext} from './slider-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SliderValueTextProps = $props();
+
+  let slider = getSliderContext();
+
+  let mergedProps = $derived(mergeProps(props, slider.getValueTextProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={e} {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {slider.value.join(', ')}
+    {/if}
+  </span>
+{/if}

package/dist/slider/slider-value-text.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderValueTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SliderValueText: $$__sveltets_2_IsomorphicComponent<SliderValueTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SliderValueText = InstanceType<typeof SliderValueText>;
+export default SliderValueText;

package/dist/slider/slider.d.ts

@@ -1,10 +1,10 @@
-export { default as Control } from './control.svelte';
-export { default as HiddenInput } from './hidden-input.svelte';
-export { default as Label } from './label.svelte';
-export { default as MarkerGroup } from './marker-group.svelte';
-export { default as Marker } from './marker.svelte';
-export { default as Range } from './range.svelte';
-export { default as Root } from './root.svelte';
-export { default as Thumb } from './thumb.svelte';
-export { default as Track } from './track.svelte';
-export { default as ValueText } from './value-text.svelte';
+export { default as Control } from './slider-control.svelte';
+export { default as HiddenInput } from './slider-hidden-input.svelte';
+export { default as Label } from './slider-label.svelte';
+export { default as MarkerGroup } from './slider-marker-group.svelte';
+export { default as Marker } from './slider-marker.svelte';
+export { default as Range } from './slider-range.svelte';
+export { default as Root } from './slider-root.svelte';
+export { default as Thumb } from './slider-thumb.svelte';
+export { default as Track } from './slider-track.svelte';
+export { default as ValueText } from './slider-value-text.svelte';

package/dist/slider/slider.js

@@ -1,10 +1,10 @@
-export { default as Control } from './control.svelte';
-export { default as HiddenInput } from './hidden-input.svelte';
-export { default as Label } from './label.svelte';
-export { default as MarkerGroup } from './marker-group.svelte';
-export { default as Marker } from './marker.svelte';
-export { default as Range } from './range.svelte';
-export { default as Root } from './root.svelte';
-export { default as Thumb } from './thumb.svelte';
-export { default as Track } from './track.svelte';
-export { default as ValueText } from './value-text.svelte';
+export { default as Control } from './slider-control.svelte';
+export { default as HiddenInput } from './slider-hidden-input.svelte';
+export { default as Label } from './slider-label.svelte';
+export { default as MarkerGroup } from './slider-marker-group.svelte';
+export { default as Marker } from './slider-marker.svelte';
+export { default as Range } from './slider-range.svelte';
+export { default as Root } from './slider-root.svelte';
+export { default as Thumb } from './slider-thumb.svelte';
+export { default as Track } from './slider-track.svelte';
+export { default as ValueText } from './slider-value-text.svelte';

package/dist/splitter/create-splitter.svelte.js

@@ -1,5 +1,5 @@
-import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
-import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
 import * as splitter from '@zag-js/splitter';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';

package/dist/splitter/index.d.ts

@@ -1,6 +1,6 @@
 export * as Splitter from './splitter.js';
-export type { SplitterPanelProps } from './panel.svelte';
-export type { SplitterResizeTriggerProps } from './resize-trigger.svelte';
-export type { SplitterProps } from './root.svelte';
+export type { SplitterPanelProps } from './splitter-panel.svelte';
+export type { SplitterResizeTriggerProps } from './splitter-resize-trigger.svelte';
+export type { SplitterProps } from './splitter-root.svelte';
 export { anatomy as splitterAnatomy } from '@zag-js/splitter';
-export { getSplitterContext } from './context.svelte.js';
+export { getSplitterContext } from './splitter-context.svelte.js';

package/dist/splitter/index.js

@@ -1,3 +1,3 @@
 export * as Splitter from './splitter.js';
 export { anatomy as splitterAnatomy } from '@zag-js/splitter';
-export { getSplitterContext } from './context.svelte.js';
+export { getSplitterContext } from './splitter-context.svelte.js';

package/dist/splitter/splitter-panel.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {PanelProps} from '@zag-js/splitter';
+
+  export interface SplitterPanelProps
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, PanelProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {getSplitterContext} from './splitter-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SplitterPanelProps = $props();
+
+  let splitter = getSplitterContext();
+
+  let [panelProps, localProps] = $derived(
+    createSplitProps<PanelProps>(['id', 'snapSize'])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(localProps, splitter.getPanelProps(panelProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/splitter/splitter-panel.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { PanelProps } from '@zag-js/splitter';
+export interface SplitterPanelProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, PanelProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SplitterPanel: $$__sveltets_2_IsomorphicComponent<SplitterPanelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SplitterPanel = InstanceType<typeof SplitterPanel>;
+export default SplitterPanel;

package/dist/splitter/splitter-resize-trigger.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ResizeTriggerProps} from '@zag-js/splitter';
+
+  interface ResizeTriggerState {
+    min: number | undefined;
+    max: number | undefined;
+    value: number;
+    focused: boolean;
+    disabled: boolean;
+    panelIds: string[];
+  }
+
+  export interface SplitterResizeTriggerProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, ResizeTriggerState>,
+      ResizeTriggerProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {getSplitterContext} from './splitter-context.svelte.js';
+
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: SplitterResizeTriggerProps = $props();
+
+  let splitter = getSplitterContext();
+
+  let [resizeTriggerProps, localProps] = $derived(
+    createSplitProps<ResizeTriggerProps>(['id', 'step', 'disabled'])(props),
+  );
+
+  let itemState = $derived(splitter.getResizeTriggerState(resizeTriggerProps));
+
+  let mergedProps = $derived(
+    mergeProps(localProps, splitter.getResizeTriggerProps(resizeTriggerProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/splitter/splitter-resize-trigger.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ResizeTriggerProps } from '@zag-js/splitter';
+interface ResizeTriggerState {
+    min: number | undefined;
+    max: number | undefined;
+    value: number;
+    focused: boolean;
+    disabled: boolean;
+    panelIds: string[];
+}
+export interface SplitterResizeTriggerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ResizeTriggerState>, ResizeTriggerProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SplitterResizeTrigger: $$__sveltets_2_IsomorphicComponent<SplitterResizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SplitterResizeTrigger = InstanceType<typeof SplitterResizeTrigger>;
+export default SplitterResizeTrigger;

package/dist/splitter/splitter-root.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateSplitterProps,
+    CreateSplitterReturn,
+  } from './create-splitter.svelte.js';
+
+  export interface SplitterProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, CreateSplitterReturn>,
+      CreateSplitterProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {createSplitter} from './create-splitter.svelte.js';
+  import {setSplitterContext} from './splitter-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: SplitterProps = $props();
+
+  let [splitterProps, localProps] = $derived(
+    createSplitProps<CreateSplitterProps>([
+      'id',
+      'ids',
+      'size',
+      'orientation',
+      'onSizeChange',
+      'onSizeChangeEnd',
+    ])(props),
+  );
+
+  let splitter = createSplitter(reflect(() => splitterProps));
+
+  let mergedProps = $derived(mergeProps(localProps, splitter.getRootProps()));
+
+  setSplitterContext(splitter);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, splitter)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(splitter)}
+  </div>
+{/if}

package/dist/splitter/splitter-root.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateSplitterProps, CreateSplitterReturn } from './create-splitter.svelte.js';
+export interface SplitterProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateSplitterReturn>, CreateSplitterProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SplitterRoot: $$__sveltets_2_IsomorphicComponent<SplitterProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SplitterRoot = InstanceType<typeof SplitterRoot>;
+export default SplitterRoot;

package/dist/splitter/splitter.d.ts

@@ -1,3 +1,3 @@
-export { default as Panel } from './panel.svelte';
-export { default as ResizeTrigger } from './resize-trigger.svelte';
-export { default as Root } from './root.svelte';
+export { default as Panel } from './splitter-panel.svelte';
+export { default as ResizeTrigger } from './splitter-resize-trigger.svelte';
+export { default as Root } from './splitter-root.svelte';

package/dist/splitter/splitter.js

@@ -1,3 +1,3 @@
-export { default as Panel } from './panel.svelte';
-export { default as ResizeTrigger } from './resize-trigger.svelte';
-export { default as Root } from './root.svelte';
+export { default as Panel } from './splitter-panel.svelte';
+export { default as ResizeTrigger } from './splitter-resize-trigger.svelte';
+export { default as Root } from './splitter-root.svelte';

package/dist/steps/create-steps.svelte.js

@@ -1,5 +1,5 @@
-import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
-import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
 import * as steps from '@zag-js/steps';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';

package/dist/steps/index.d.ts

@@ -1,14 +1,14 @@
 export * as Steps from './steps.js';
-export type { StepsCompletedContentProps } from './completed-content.svelte';
-export type { StepsContentProps } from './content.svelte';
-export type { StepsIndicatorProps } from './indicator.svelte';
-export type { StepsItemProps } from './item.svelte';
-export type { StepsListProps } from './list.svelte';
-export type { StepsNextTriggerProps } from './next-trigger.svelte';
-export type { StepsPrevTriggerProps } from './prev-trigger.svelte';
-export type { StepsProgressProps } from './progress.svelte';
-export type { StepsProps } from './root.svelte';
-export type { StepsSeparatorProps } from './separator.svelte';
-export type { StepsTriggerProps } from './trigger.svelte';
+export type { StepsCompletedContentProps } from './steps-completed-content.svelte';
+export type { StepsContentProps } from './steps-content.svelte';
+export type { StepsIndicatorProps } from './steps-indicator.svelte';
+export type { StepsItemProps } from './steps-item.svelte';
+export type { StepsListProps } from './steps-list.svelte';
+export type { StepsNextTriggerProps } from './steps-next-trigger.svelte';
+export type { StepsPrevTriggerProps } from './steps-prev-trigger.svelte';
+export type { StepsProgressProps } from './steps-progress.svelte';
+export type { StepsProps } from './steps-root.svelte';
+export type { StepsSeparatorProps } from './steps-separator.svelte';
+export type { StepsTriggerProps } from './steps-trigger.svelte';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
-export { getStepsContext } from './context.svelte.js';
+export { getStepsContext } from './steps-context.svelte.js';

package/dist/steps/index.js

@@ -1,3 +1,3 @@
 export * as Steps from './steps.js';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
-export { getStepsContext } from './context.svelte.js';
+export { getStepsContext } from './steps-context.svelte.js';

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

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface StepsCompletedContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getStepsContext} from './steps-context.svelte.js';
+
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: StepsCompletedContentProps = $props();
+
+  let steps = getStepsContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      steps.getContentProps({
+        index: steps.count,
+      }),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsCompletedContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const StepsCompletedContent: $$__sveltets_2_IsomorphicComponent<StepsCompletedContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type StepsCompletedContent = InstanceType<typeof StepsCompletedContent>;
+export default StepsCompletedContent;

package/dist/steps/steps-content.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps} from '@zag-js/steps';
+
+  export interface StepsContentProps
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getStepsContext} from './steps-context.svelte.js';
+
+  let {
+    this: e,
+    index,
+    asChild,
+    children,
+    ...props
+  }: StepsContentProps = $props();
+
+  let steps = getStepsContext();
+
+  let mergedProps = $derived(mergeProps(props, steps.getContentProps({index})));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,22 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps } from '@zag-js/steps';
+export interface StepsContentProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ItemProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const StepsContent: $$__sveltets_2_IsomorphicComponent<StepsContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type StepsContent = InstanceType<typeof StepsContent>;
+export default StepsContent;

package/dist/steps/steps-indicator.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface StepsIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getStepsContext,
+    getStepsItemPropsContext,
+  } from './steps-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: StepsIndicatorProps = $props();
+
+  let steps = getStepsContext();
+
+  let itemProps = getStepsItemPropsContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, steps.getIndicatorProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const StepsIndicator: $$__sveltets_2_IsomorphicComponent<StepsIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type StepsIndicator = InstanceType<typeof StepsIndicator>;
+export default StepsIndicator;

package/dist/steps/steps-item.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/steps';
+
+  export interface StepsItemProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
+      ItemProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {
+    getStepsContext,
+    setStepsItemPropsContext,
+  } from './steps-context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: StepsItemProps = $props();
+
+  let steps = getStepsContext();
+
+  let [itemProps, localProps] = $derived(
+    createSplitProps<ItemProps>(['index'])(props),
+  );
+
+  let itemState = $derived(steps.getItemState(itemProps));
+
+  let mergedProps = $derived(
+    mergeProps(localProps, steps.getItemProps(itemProps)),
+  );
+
+  setStepsItemPropsContext(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}