ui-ingredients 0.0.39 → 0.0.40

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

package/dist/menu/arrow-tip.svelte

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

package/dist/menu/arrow.svelte

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

package/dist/menu/content.svelte

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

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

package/dist/menu/indicator.svelte

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

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

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

package/dist/menu/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/menu';
-  import type {Snippet} from 'svelte';
 
   export interface MenuItemProps
-    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/menu/option-item-indicator.svelte

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

package/dist/menu/option-item-text.svelte

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

package/dist/menu/option-item.svelte

@@ -1,13 +1,12 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {OptionItemProps, OptionItemState} from '@zag-js/menu';
-  import type {Snippet} from 'svelte';
 
   export interface MenuOptionItemProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, OptionItemProps> {
-    asChild?: AsChild<OptionItemState>;
-    children?: Snippet<[OptionItemState]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', OptionItemState>,
+      OptionItemProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/menu/positioner.svelte

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

package/dist/menu/root.svelte

@@ -1,24 +1,32 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-  import {
-    type CreateMenuProps,
-    type CreateMenuReturn,
-  } from './create-menu.svelte.js';
-
-  export interface MenuRootProps extends CreateMenuProps {
-    children?: Snippet<[menu: CreateMenuReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {setMenuContext} from './context.svelte.js';
-  import {createMenu} from './create-menu.svelte.js';
-
-  let {children, ...props}: MenuRootProps = $props();
-
-  let menu = createMenu(props);
-
-  setMenuContext(menu);
-</script>
-
-{@render children?.(menu)}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+  import {
+    type CreateMenuProps,
+    type CreateMenuReturn,
+  } from './create-menu.svelte.js';
+
+  export interface MenuRootProps extends CreateMenuProps {
+    children?: Snippet<[CreateMenuReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {setMenuContext} from './context.svelte.js';
+  import {createMenu} from './create-menu.svelte.js';
+
+  let {children, ...props}: MenuRootProps = $props();
+
+  let menu = createMenu(props);
+  let presence = createPresence({
+    get present() {
+      return menu.open;
+    },
+  });
+
+  setMenuContext(menu);
+  setPresenceContext(presence);
+</script>
+
+{@render children?.(menu)}

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

package/dist/menu/trigger-item.svelte

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

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

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

package/dist/number-input/decrement-trigger.svelte

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

package/dist/number-input/increment-trigger.svelte

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

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

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

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

package/dist/number-input/scrubber.svelte

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

package/dist/pagination/ellipsis.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 {EllipsisProps} from '@zag-js/pagination';
 
   export interface PaginationEllipsisProps
-    extends Assign<HTMLProps<'span'>, EllipsisProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'span'>, EllipsisProps> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/item.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/pagination';
 
   export interface PaginationItemProps
-    extends Assign<HTMLProps<'button'>, Omit<ItemProps, 'type'>> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'button'>, Omit<ItemProps, 'type'>> {}
 </script>
 
 <script lang="ts">

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

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

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

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

package/dist/pin-input/create-pin-input.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { HTMLProps } from '../types.js';
+import type { HtmlProps } from '../types.js';
 import * as pinInput from '@zag-js/pin-input';
 export interface CreatePinInputProps extends Omit<pinInput.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
 export interface CreatePinInputReturn extends pinInput.Api {
-    getClearTriggerProps(): HTMLProps<'button'>;
+    getClearTriggerProps(): HtmlProps<'button'>;
 }
 export declare function createPinInputContext(props: CreatePinInputProps): CreatePinInputReturn;

package/dist/pin-input/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 PinInputHiddenInputProps extends HTMLProps<'input'> {}
+  export interface PinInputHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getPinInputContext} from './context.svelte.js';
 
-  let {...props}: PinInputHiddenInputProps = $props();
+  let {asChild, ...props}: PinInputHiddenInputProps = $props();
 
   let pinInput = getPinInputContext();
 
   let mergedProps = $derived(mergeProps(props, pinInput.getHiddenInputProps()));
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

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

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