ui-ingredients 0.0.25 → 0.0.27

package/dist/steps/root.svelte

@@ -1,15 +1,16 @@
 <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 {CreateStepsProps, CreateStepsReturn} from './create-steps.svelte.js';
 
   export interface StepsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateStepsProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateStepsReturn>;
     children?: Snippet<[steps: CreateStepsReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {stepsContext} from './context.svelte.js';
   import {createSteps} from './create-steps.svelte.js';
 
@@ -22,6 +23,7 @@
     orientation,
     onStepChange,
     onStepComplete,
+    asChild,
     children,
     ...props
   }: StepsProps = $props();
@@ -37,11 +39,15 @@
     onStepComplete,
   });
 
-  let attrs = $derived(mergeProps(props, steps.getRootProps()));
+  let attrs = $derived(mergeProps<Record<string, any>>(props, steps.getRootProps()));
 
   stepsContext.set(steps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(steps)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, steps)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(steps)}
+  </div>
+{/if}

package/dist/steps/separator.svelte

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

package/dist/steps/trigger.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface StepsTriggerProps extends HtmlProps<'button'> {}
+  export interface StepsTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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}: StepsTriggerProps = $props();
+  let {asChild, children, ...props}: StepsTriggerProps = $props();
 
   let steps = stepsContext.get();
   let itemProps = stepsItemPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, steps.getTriggerProps(itemProps)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/switch/control.svelte

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

package/dist/switch/hidden-input.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {switchContext} from './context.svelte.js';
 
   let {...props}: SwitchHiddenInputProps = $props();

package/dist/switch/label.svelte

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

package/dist/switch/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateSwitchProps, CreateSwitchReturn} from './create-switch.svelte.js';
 
   export interface SwitchProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateSwitchProps> {
+    asChild?: AsChild<HtmlProps<'label'>, CreateSwitchReturn>;
     children?: Snippet<[switch$: CreateSwitchReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {switchContext} from './context.svelte.js';
   import {createSwitch} from './create-switch.svelte.js';
 
@@ -27,6 +28,7 @@
     readOnly,
     required,
     onCheckedChange,
+    asChild,
     children,
     ...props
   }: SwitchProps = $props();
@@ -51,6 +53,10 @@
   switchContext.set(switch$);
 </script>
 
-<label {...attrs}>
-  {@render children?.(switch$)}
-</label>
+{#if asChild}
+  {@render asChild(attrs, switch$)}
+{:else}
+  <label {...attrs}>
+    {@render children?.(switch$)}
+  </label>
+{/if}

package/dist/switch/thumb.svelte

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

package/dist/tabs/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 {ContentProps} from '@zag-js/tabs';
 
-  export interface TabsContentProps extends Assign<HtmlProps<'div'>, ContentProps> {}
+  export interface TabsContentProps extends Assign<HtmlProps<'div'>, ContentProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tabsContext} from './context.svelte.js';
 
-  let {value, children, ...props}: TabsContentProps = $props();
+  let {value, asChild, children, ...props}: TabsContentProps = $props();
 
   let tabs = tabsContext.get();
 
   let attrs = $derived(mergeProps(props, tabs.getContentProps({value})));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tabs/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 TabsListProps extends HtmlProps<'div'> {}
+  export interface TabsListProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tabsContext} from './context.svelte.js';
 
-  let {children, ...props}: TabsListProps = $props();
+  let {asChild, children, ...props}: TabsListProps = $props();
 
   let tabs = tabsContext.get();
 
   let attrs = $derived(mergeProps(props, tabs.getListProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tabs/root.svelte

@@ -1,15 +1,16 @@
 <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 {CreateTabsProps, CreateTabsReturn} from './create-tabs.svelte.js';
 
   export interface TabsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTabsProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateTabsReturn>;
     children?: Snippet<[tabs: CreateTabsReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tabsContext} from './context.svelte.js';
   import {createTabs} from './create-tabs.svelte.js';
 
@@ -24,6 +25,7 @@
     activationMode,
     onFocusChange,
     onValueChange,
+    asChild,
     children,
     ...props
   }: TabsProps = $props();
@@ -41,11 +43,15 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, tabs.getRootProps()));
+  let attrs = $derived<Record<string, any>>(mergeProps(props, tabs.getRootProps()));
 
   tabsContext.set(tabs);
 </script>
 
-<div {...attrs}>
-  {@render children?.(tabs)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, tabs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(tabs)}
+  </div>
+{/if}

package/dist/tabs/trigger.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 {TriggerProps} from '@zag-js/tabs';
 
-  export interface TabsTriggerProps extends Assign<HtmlProps<'button'>, TriggerProps> {}
+  export interface TabsTriggerProps extends Assign<HtmlProps<'button'>, TriggerProps> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tabsContext} from './context.svelte.js';
 
-  let {value, disabled, children, ...props}: TabsTriggerProps = $props();
+  let {value, disabled, asChild, children, ...props}: TabsTriggerProps = $props();
 
   let tabs = tabsContext.get();
 
@@ -24,6 +26,10 @@
   );
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/tags-input/clear-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 TagsInputClearTriggerProps extends HtmlProps<'button'> {}
+  export interface TagsInputClearTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext} from './context.svelte.js';
 
-  let {children, ...props}: TagsInputClearTriggerProps = $props();
+  let {asChild, children, ...props}: TagsInputClearTriggerProps = $props();
 
   let tagsInput = tagsInputContext.get();
 
   let attrs = $derived(mergeProps(props, tagsInput.getClearTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/tags-input/control.svelte

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

package/dist/tags-input/hidden-input.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext} from './context.svelte.js';
 
   let {...props}: TagsInputHiddenInputProps = $props();

package/dist/tags-input/input.svelte

@@ -1,18 +1,24 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TagsInputInputProps extends HtmlProps<'input'> {}
+  export interface TagsInputInputProps extends HtmlProps<'input'> {
+    asChild?: AsChild<HtmlProps<'input'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext} from './context.svelte.js';
 
-  let {...props}: TagsInputInputProps = $props();
+  let {asChild, ...props}: TagsInputInputProps = $props();
 
   let tagsInput = tagsInputContext.get();
 
   let attrs = $derived(mergeProps(props, tagsInput.getInputProps()));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

package/dist/tags-input/item-delete-trigger.svelte

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

package/dist/tags-input/item-input.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface TagsInputItemInputProps extends HtmlProps<'input'> {}
+  export interface TagsInputItemInputProps extends HtmlProps<'input'> {
+    asChild?: AsChild<HtmlProps<'input'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext, tagsInputItemPropsContext} from './context.svelte.js';
 
-  let {...props}: TagsInputItemInputProps = $props();
+  let {asChild, ...props}: TagsInputItemInputProps = $props();
 
   let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
@@ -16,4 +18,8 @@
   let attrs = $derived(mergeProps(props, tagsInput.getItemInputProps(itemProps)));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

package/dist/tags-input/item-preview.svelte

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