ui-ingredients 0.0.25 → 0.0.27

package/dist/slider/marker.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {MarkerProps} from '@zag-js/slider';
 
-  export interface SliderMarkerProps extends Assign<HtmlProps<'span'>, MarkerProps> {}
+  export interface SliderMarkerProps extends Assign<HtmlProps<'div'>, MarkerProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext} from './context.svelte.js';
 
-  let {value, children, ...props}: SliderMarkerProps = $props();
+  let {value, asChild, children, ...props}: SliderMarkerProps = $props();
 
   let slider = sliderContext.get();
 
@@ -23,6 +25,10 @@
   );
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/slider/range.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SliderRangeProps extends HtmlProps<'div'> {}
+  export interface SliderRangeProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext} from './context.svelte.js';
 
-  let {children, ...props}: SliderRangeProps = $props();
+  let {asChild, children, ...props}: SliderRangeProps = $props();
 
   let slider = sliderContext.get();
 
   let attrs = $derived(mergeProps(props, slider.getRangeProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/slider/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateSliderProps, CreateSliderReturn} from './create-slider.svelte.js';
 
   export interface SliderProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSliderProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateSliderReturn>;
     children?: Snippet<[slider: CreateSliderReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext} from './context.svelte.js';
   import {createSlider} from './create-slider.svelte.js';
 
@@ -37,6 +38,7 @@
     onValueChange,
     onValueChangeEnd,
     getAriaValueText,
+    asChild,
     children,
     ...props
   }: SliderProps = $props();
@@ -71,6 +73,10 @@
   sliderContext.set(slider);
 </script>
 
-<div {...attrs}>
-  {@render children?.(slider)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, slider)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(slider)}
+  </div>
+{/if}

package/dist/slider/thumb.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ThumbProps} from '@zag-js/slider';
 
-  export interface SliderThumbProps extends Assign<HtmlProps<'div'>, ThumbProps> {}
+  export interface SliderThumbProps extends Assign<HtmlProps<'div'>, ThumbProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
 
-  let {name, index, children, ...props}: SliderThumbProps = $props();
+  let {name, index, asChild, children, ...props}: SliderThumbProps = $props();
 
   let slider = sliderContext.get();
   let thumbProps = $derived({
@@ -22,6 +24,10 @@
   sliderThumbPropsContext.set(() => thumbProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/slider/track.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SliderTrackProps extends HtmlProps<'div'> {}
+  export interface SliderTrackProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext} from './context.svelte.js';
 
-  let {children, ...props}: SliderTrackProps = $props();
+  let {asChild, children, ...props}: SliderTrackProps = $props();
 
   let slider = sliderContext.get();
 
   let attrs = $derived(mergeProps(props, slider.getTrackProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/slider/value-text.svelte

@@ -1,24 +1,30 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface SliderValueTextProps extends HtmlProps<'span'> {}
+  export interface SliderValueTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext} from './context.svelte.js';
 
-  let {children, ...props}: SliderValueTextProps = $props();
+  let {asChild, children, ...props}: SliderValueTextProps = $props();
 
   let slider = sliderContext.get();
 
   let attrs = $derived(mergeProps(props, slider.getValueTextProps()));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {slider.value.join(', ')}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {slider.value.join(', ')}
+    {/if}
+  </span>
+{/if}

package/dist/splitter/panel.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {PanelProps} from '@zag-js/splitter';
 
-  export interface SplitterPanelProps extends Assign<HtmlProps<'div'>, PanelProps> {}
+  export interface SplitterPanelProps extends Assign<HtmlProps<'div'>, PanelProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {splitterContext} from './context.svelte.js';
 
-  let {id, snapSize, children, ...props}: SplitterPanelProps = $props();
+  let {id, snapSize, asChild, children, ...props}: SplitterPanelProps = $props();
 
   let splitter = splitterContext.get();
 
@@ -24,6 +26,10 @@
   );
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/splitter/resize-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ResizeTriggerProps} from '@zag-js/splitter';
 
   /* Currently not exported in zag */
@@ -14,16 +14,17 @@
 
   export interface SplitterResizeTriggerProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, ResizeTriggerProps> {
+    asChild?: AsChild<GenericHtmlProps, ResizeTriggerState>;
     children?: Snippet<[state: ResizeTriggerState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import type {Snippet} from 'svelte';
   import {splitterContext} from './context.svelte.js';
 
-  let {id, step, disabled, children, ...props}: SplitterResizeTriggerProps = $props();
+  let {id, step, disabled, asChild, children, ...props}: SplitterResizeTriggerProps = $props();
 
   let splitter = splitterContext.get();
   let resizeTriggerProps: ResizeTriggerProps = $derived({
@@ -36,6 +37,10 @@
   let state = $derived(splitter.getResizeTriggerState(resizeTriggerProps));
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/splitter/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateSplitterProps, CreateSplitterReturn} from './create-splitter.svelte.js';
 
   export interface SplitterProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSplitterProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateSplitterReturn>;
     children?: Snippet<[splitter: CreateSplitterReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {splitterContext} from './context.svelte.js';
   import {createSplitter} from './create-splitter.svelte.js';
 
@@ -21,6 +22,7 @@
     orientation,
     onSizeChange,
     onSizeChangeEnd,
+    asChild,
     children,
     ...props
   }: SplitterProps = $props();
@@ -39,6 +41,10 @@
   splitterContext.set(splitter);
 </script>
 
-<div {...attrs}>
-  {@render children?.(splitter)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, splitter)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(splitter)}
+  </div>
+{/if}

package/dist/steps/completed-content.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface StepsCompletedContentProps extends HtmlProps<'div'> {}
+  export interface StepsCompletedContentProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsCompletedContentProps = $props();
+  let {asChild, children, ...props}: StepsCompletedContentProps = $props();
 
   let steps = stepsContext.get();
 
@@ -22,6 +24,10 @@
   );
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/steps/content.svelte

@@ -1,21 +1,27 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/steps';
 
-  export interface StepsContentProps extends Assign<HtmlProps<'div'>, ItemProps> {}
+  export interface StepsContentProps extends Assign<HtmlProps<'div'>, ItemProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext} from './context.svelte.js';
 
-  let {index, children, ...props}: StepsContentProps = $props();
+  let {index, asChild, children, ...props}: StepsContentProps = $props();
 
   let steps = stepsContext.get();
 
   let attrs = $derived(mergeProps(props, steps.getContentProps({index})));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/steps/indicator.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface StepsIndicatorProps extends HtmlProps<'div'> {}
+  export interface StepsIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsIndicatorProps = $props();
+  let {asChild, children, ...props}: StepsIndicatorProps = $props();
 
   let steps = stepsContext.get();
   let itemProps = stepsItemPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, steps.getIndicatorProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/steps/item.svelte

@@ -1,18 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/steps';
   import type {Snippet} from 'svelte';
 
   export interface StepsItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: AsChild<GenericHtmlProps, ItemState>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
-  let {index, children, ...props}: StepsItemProps = $props();
+  let {index, asChild, children, ...props}: StepsItemProps = $props();
 
   let steps = stepsContext.get();
   let itemProps = $derived({
@@ -25,6 +26,10 @@
   stepsItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/steps/list.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface StepsListProps extends HtmlProps<'div'> {}
+  export interface StepsListProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsListProps = $props();
+  let {asChild, children, ...props}: StepsListProps = $props();
 
   let steps = stepsContext.get();
 
   let attrs = $derived(mergeProps(props, steps.getListProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/steps/next-trigger.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface StepsNextTriggerProps extends HtmlProps<'button'> {}
+  export interface StepsNextTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsNextTriggerProps = $props();
+  let {asChild, children, ...props}: StepsNextTriggerProps = $props();
 
   let steps = stepsContext.get();
 
   let attrs = $derived(mergeProps(props, steps.getNextTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/steps/prev-trigger.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface StepsPrevTriggerProps extends HtmlProps<'button'> {}
+  export interface StepsPrevTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsPrevTriggerProps = $props();
+  let {asChild, children, ...props}: StepsPrevTriggerProps = $props();
 
   let steps = stepsContext.get();
 
   let attrs = $derived(mergeProps(props, steps.getPrevTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/steps/progress.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface StepsProgressProps extends HtmlProps<'div'> {}
+  export interface StepsProgressProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsProgressProps = $props();
+  let {asChild, children, ...props}: StepsProgressProps = $props();
 
   let steps = stepsContext.get();
 
   let attrs = $derived(mergeProps(props, steps.getProgressProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}