ui-ingredients 0.0.39 → 0.0.40

package/dist/steps/prev-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface StepsPrevTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface StepsPrevTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/progress.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface StepsProgressProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface StepsProgressProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateStepsProps,
     CreateStepsReturn,
   } from './create-steps.svelte.js';
 
   export interface StepsProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateStepsProps> {
-    asChild?: AsChild<CreateStepsReturn>;
-    children?: Snippet<[CreateStepsReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateStepsReturn>,
+      CreateStepsProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/steps/separator.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface StepsSeparatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface StepsSeparatorProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/steps/trigger.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface StepsTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface StepsTriggerProps extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/control.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SwitchControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface SwitchControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/hidden-input.svelte

@@ -1,18 +1,23 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SwitchHiddenInputProps extends HTMLProps<'input'> {}
+  export interface SwitchHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getSwitchContext} from './context.svelte.js';
 
-  let {...props}: SwitchHiddenInputProps = $props();
+  let {asChild, ...props}: SwitchHiddenInputProps = $props();
 
   let switch$ = getSwitchContext();
 
   let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/switch/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SwitchLabelProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SwitchLabelProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/switch/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateSwitchProps,
     CreateSwitchReturn,
   } from './create-switch.svelte.js';
 
   export interface SwitchProps
-    extends Assign<Omit<HTMLProps<'label'>, 'children'>, CreateSwitchProps> {
-    asChild?: AsChild<CreateSwitchReturn>;
-    children?: Snippet<[CreateSwitchReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'label', CreateSwitchReturn>,
+      CreateSwitchProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/switch/thumb.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SwitchThumbProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tabs/content.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ContentProps} from '@zag-js/tabs';
 
   export interface TabsContentProps
-    extends Assign<HTMLProps<'div'>, ContentProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, ContentProps> {}
 </script>
 
 <script lang="ts">

package/dist/tabs/list.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TabsListProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TabsListProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tabs/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTabsProps,
     CreateTabsReturn,
   } from './create-tabs.svelte.js';
 
   export interface TabsProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateTabsProps> {
-    asChild?: AsChild<CreateTabsReturn>;
-    children?: Snippet<[CreateTabsReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateTabsReturn>,
+      CreateTabsProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/tabs/trigger.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {TriggerProps} from '@zag-js/tabs';
 
   export interface TabsTriggerProps
-    extends Assign<HTMLProps<'button'>, TriggerProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'button'>, TriggerProps> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/clear-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputClearTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputClearTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/control.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,14 +1,15 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputHiddenInputProps extends HTMLProps<'input'> {}
+  export interface TagsInputHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getTagsInputContext} from './context.svelte.js';
 
-  let {...props}: TagsInputHiddenInputProps = $props();
+  let {asChild, ...props}: TagsInputHiddenInputProps = $props();
 
   let tagsInput = getTagsInputContext();
 
@@ -17,4 +18,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/tags-input/input.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputInputProps extends HTMLProps<'input'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputInputProps extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputItemDeleteTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputItemDeleteTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputItemInputProps extends HTMLProps<'input'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputItemInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputItemPreviewProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputItemPreviewProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputItemTextProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputItemTextProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/item.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/tags-input';
-  import type {Snippet} from 'svelte';
 
   export interface TagsInputItemProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, ItemProps> {
-    asChild?: AsChild<ItemState>;
-    children?: Snippet<[ItemState]>;
-  }
+    extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TagsInputLabelProps extends HTMLProps<'label'> {
-    asChild?: AsChild;
-  }
+  export interface TagsInputLabelProps extends HtmlIngredientProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/tags-input/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTagsInputProps,
     CreateTagsInputReturn,
   } from './create-tags-input.svelte.js';
 
   export interface TagsInputProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateTagsInputProps> {
-    asChild?: AsChild<CreateTagsInputReturn>;
-    children?: Snippet<[CreateTagsInputReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateTagsInputReturn>,
+      CreateTagsInputProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/clear-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerClearTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerClearTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/column.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ColumnProps} from '@zag-js/time-picker';
 
   export interface TimePickerColumnProps
-    extends Assign<HTMLProps<'div'>, ColumnProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, ColumnProps> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/content.svelte

@@ -1,26 +1,24 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface TimePickerContentProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getTimePickerContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: TimePickerContentProps = $props();
-
-  let timePicker = getTimePickerContext();
-
-  let mergedProps = $derived(mergeProps(props, timePicker.getContentProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TimePickerContentProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getTimePickerContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TimePickerContentProps = $props();
+
+  let timePicker = getTimePickerContext();
+
+  let mergedProps = $derived(mergeProps(props, timePicker.getContentProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/time-picker/control.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/hour-cell.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CellProps} from '@zag-js/time-picker';
 
   export interface TimePickerHourCellProps
-    extends Assign<HTMLProps<'div'>, CellProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, CellProps> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/input.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerInputProps extends HTMLProps<'input'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerInputProps extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerLabelProps extends HTMLProps<'label'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerLabelProps extends HtmlIngredientProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/minute-cell.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CellProps} from '@zag-js/time-picker';
 
   export interface TimePickerMinuteCellProps
-    extends Assign<HTMLProps<'div'>, CellProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, CellProps> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/period-cell.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {PeriodCellProps} from '@zag-js/time-picker';
 
   export interface TimePickerPeriodCellProps
-    extends Assign<HTMLProps<'div'>, PeriodCellProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, PeriodCellProps> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/positioner.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerPositionerProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerPositionerProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTimePickerProps,
     CreateTimePickerReturn,
   } from './create-time-picker.svelte.js';
 
   export interface TimePickerProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateTimePickerProps> {
-    asChild?: AsChild<CreateTimePickerReturn>;
-    children?: Snippet<[CreateTimePickerReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateTimePickerReturn>,
+      CreateTimePickerProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/second-cell.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CellProps} from '@zag-js/time-picker';
 
   export interface TimePickerSecondCellProps
-    extends Assign<HTMLProps<'div'>, CellProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, CellProps> {}
 </script>
 
 <script lang="ts">

package/dist/time-picker/spacer.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerSpacerProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface TimePickerSpacerProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">