ui-ingredients 0.0.38 → 0.0.40

package/dist/select/positioner.svelte

@@ -1,26 +1,28 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface SelectPositionerProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSelectContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SelectPositionerProps = $props();
-
-  let select = getSelectContext();
-
-  let mergedProps = $derived(mergeProps(props, select.getPositionerProps()));
-</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 SelectPositionerProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SelectPositionerProps = $props();
+
+  let select = getSelectContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, select.getPositionerProps(), presence.getPresenceProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/root.svelte

@@ -1,71 +1,78 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateSelectProps,
-    CreateSelectReturn,
-  } from './create-select.svelte.js';
-
-  export interface SelectProps<T>
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateSelectProps<T>> {
-    asChild?: AsChild<CreateSelectReturn>;
-    children?: Snippet<[CreateSelectReturn]>;
-  }
-</script>
-
-<script lang="ts" generics="T">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setSelectContext} from './context.svelte.js';
-  import {createSelect} from './create-select.svelte.js';
-
-  let {asChild, children, ...props}: SelectProps<T> = $props();
-
-  let [selectProps, otherProps] = $derived(
-    createSplitProps<CreateSelectProps<T>>([
-      'id',
-      'ids',
-      'form',
-      'name',
-      'open',
-      'defaultOpen',
-      'value',
-      'items',
-      'invalid',
-      'multiple',
-      'disabled',
-      'readOnly',
-      'required',
-      'loopFocus',
-      'composite',
-      'positioning',
-      'closeOnSelect',
-      'highlightedValue',
-      'itemToValue',
-      'itemToString',
-      'isItemDisabled',
-      'onOpenChange',
-      'onValueChange',
-      'onFocusOutside',
-      'onHighlightChange',
-      'onInteractOutside',
-      'onPointerDownOutside',
-      'scrollToIndexFn',
-    ])(props),
-  );
-
-  let select = createSelect(reflect(() => selectProps));
-
-  let mergedProps = $derived(mergeProps(otherProps, select.getRootProps()));
-
-  setSelectContext(select);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, select)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.(select)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateSelectProps,
+    CreateSelectReturn,
+  } from './create-select.svelte.js';
+
+  export interface SelectProps<T>
+    extends Assign<
+      HtmlIngredientProps<'div', CreateSelectReturn>,
+      CreateSelectProps<T>
+    > {}
+</script>
+
+<script lang="ts" generics="T">
+  import {mergeProps} from '../merge-props.js';
+  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setSelectContext} from './context.svelte.js';
+  import {createSelect} from './create-select.svelte.js';
+
+  let {asChild, children, ...props}: SelectProps<T> = $props();
+
+  let [selectProps, otherProps] = $derived(
+    createSplitProps<CreateSelectProps<T>>([
+      'id',
+      'ids',
+      'form',
+      'name',
+      'open',
+      'defaultOpen',
+      'value',
+      'items',
+      'invalid',
+      'multiple',
+      'disabled',
+      'readOnly',
+      'required',
+      'loopFocus',
+      'composite',
+      'positioning',
+      'closeOnSelect',
+      'highlightedValue',
+      'itemToValue',
+      'itemToString',
+      'isItemDisabled',
+      'onOpenChange',
+      'onValueChange',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInteractOutside',
+      'onPointerDownOutside',
+      'scrollToIndexFn',
+    ])(props),
+  );
+
+  let select = createSelect(reflect(() => selectProps));
+  let presence = createPresence({
+    get present() {
+      return select.open;
+    },
+  });
+
+  let mergedProps = $derived(mergeProps(otherProps, select.getRootProps()));
+
+  setSelectContext(select);
+  setPresenceContext(presence);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, select)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(select)}
+  </div>
+{/if}

package/dist/select/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 SelectTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface SelectTriggerProps extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/select/value-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 SelectValueTextProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SelectValueTextProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/signature-pad/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 SignaturePadClearTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface SignaturePadClearTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/signature-pad/control.svelte

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

package/dist/signature-pad/current-segment-path.svelte

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

package/dist/signature-pad/guide.svelte

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

package/dist/signature-pad/hidden-input.svelte

@@ -1,16 +1,16 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {HiddenInputProps} from '@zag-js/signature-pad';
 
   export interface SignaturePadHiddenInputProps
-    extends Assign<HTMLProps<'input'>, HiddenInputProps> {}
+    extends Assign<HtmlIngredientProps<'input'>, HiddenInputProps> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './context.svelte.js';
 
-  let {value, ...props}: SignaturePadHiddenInputProps = $props();
+  let {value, asChild, ...props}: SignaturePadHiddenInputProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -19,4 +19,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/signature-pad/label.svelte

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

package/dist/signature-pad/root.svelte

@@ -1,6 +1,5 @@
 <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 {
     CreateSignaturePadProps,
     CreateSignaturePadReturn,
@@ -8,12 +7,9 @@
 
   export interface SignaturePadProps
     extends Assign<
-      Omit<HTMLProps<'div'>, 'children'>,
+      HtmlIngredientProps<'div', CreateSignaturePadReturn>,
       CreateSignaturePadProps
-    > {
-    asChild?: AsChild<CreateSignaturePadReturn>;
-    children?: Snippet<[CreateSignaturePadReturn]>;
-  }
+    > {}
 </script>
 
 <script lang="ts">

package/dist/signature-pad/segment-path.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 {SegmentPathProps} from '@zag-js/signature-pad';
 
   export interface SignaturePadSegmentPathProps
-    extends Assign<HTMLProps<'path'>, SegmentPathProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'path'>, SegmentPathProps> {}
 </script>
 
 <script lang="ts">

package/dist/signature-pad/segment.svelte

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

package/dist/slider/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 SliderControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface SliderControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/hidden-input.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface SliderHiddenInputProps extends HTMLProps<'input'> {}
+  export interface SliderHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
@@ -11,7 +12,7 @@
     getSliderThumbPropsContext,
   } from './context.svelte.js';
 
-  let {...props}: SliderHiddenInputProps = $props();
+  let {asChild, ...props}: SliderHiddenInputProps = $props();
 
   let slider = getSliderContext();
   let thumbProps = getSliderThumbPropsContext();
@@ -21,4 +22,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/slider/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 SliderLabelProps extends HTMLProps<'label'> {
-    asChild?: AsChild;
-  }
+  export interface SliderLabelProps extends HtmlIngredientProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/slider/marker-group.svelte

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

package/dist/slider/marker.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 {MarkerProps} from '@zag-js/slider';
 
   export interface SliderMarkerProps
-    extends Assign<HTMLProps<'div'>, MarkerProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, MarkerProps> {}
 </script>
 
 <script lang="ts">

package/dist/slider/range.svelte

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

package/dist/slider/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 {
     CreateSliderProps,
     CreateSliderReturn,
   } from './create-slider.svelte.js';
 
   export interface SliderProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateSliderProps> {
-    asChild?: AsChild<CreateSliderReturn>;
-    children?: Snippet<[CreateSliderReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateSliderReturn>,
+      CreateSliderProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/slider/thumb.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 {ThumbProps} from '@zag-js/slider';
 
   export interface SliderThumbProps
-    extends Assign<HTMLProps<'div'>, ThumbProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {}
 </script>
 
 <script lang="ts">

package/dist/slider/track.svelte

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

package/dist/slider/value-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 SliderValueTextProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface SliderValueTextProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/splitter/panel.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 {PanelProps} from '@zag-js/splitter';
 
   export interface SplitterPanelProps
-    extends Assign<HTMLProps<'div'>, PanelProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, PanelProps> {}
 </script>
 
 <script lang="ts">

package/dist/splitter/resize-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ResizeTriggerProps} from '@zag-js/splitter';
 
   interface ResizeTriggerState {
@@ -12,16 +12,15 @@
   }
 
   export interface SplitterResizeTriggerProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, ResizeTriggerProps> {
-    asChild?: AsChild<ResizeTriggerState>;
-    children?: Snippet<[ResizeTriggerState]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', ResizeTriggerState>,
+      ResizeTriggerProps
+    > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import type {Snippet} from 'svelte';
   import {getSplitterContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SplitterResizeTriggerProps = $props();

package/dist/splitter/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 {
     CreateSplitterProps,
     CreateSplitterReturn,
   } from './create-splitter.svelte.js';
 
   export interface SplitterProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateSplitterProps> {
-    asChild?: AsChild<CreateSplitterReturn>;
-    children?: Snippet<[CreateSplitterReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateSplitterReturn>,
+      CreateSplitterProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/steps/completed-content.svelte

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

package/dist/steps/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 {ItemProps} from '@zag-js/steps';
 
   export interface StepsContentProps
-    extends Assign<HTMLProps<'div'>, ItemProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
 </script>
 
 <script lang="ts">