ui-ingredients 0.0.39 → 0.0.40

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

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

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

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

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

package/dist/editable/preview.svelte

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

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

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

package/dist/field/create-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLProps } from '../types.js';
+import type { HtmlProps } from '../types.js';
 interface ElementIds {
     root?: string;
     label?: string;
@@ -29,12 +29,12 @@ export declare function createField(props: CreateFieldProps): {
     readonly readOnly: boolean;
     readonly invalid: boolean;
     readonly 'aria-describedby': string;
-    getRootProps: () => HTMLProps<"div">;
-    getLabelProps: () => HTMLProps<"label">;
-    getErrorTextProps: () => HTMLProps<"div">;
-    getHelperTextProps: () => HTMLProps<"div">;
-    getInputProps: () => HTMLProps<"input">;
-    getSelectProps: () => HTMLProps<"select">;
-    getTextareaProps: () => HTMLProps<"textarea">;
+    getRootProps: () => HtmlProps<"div">;
+    getLabelProps: () => HtmlProps<"label">;
+    getErrorTextProps: () => HtmlProps<"div">;
+    getHelperTextProps: () => HtmlProps<"div">;
+    getInputProps: () => HtmlProps<"input">;
+    getSelectProps: () => HtmlProps<"select">;
+    getTextareaProps: () => HtmlProps<"textarea">;
 };
 export {};

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

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

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

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

package/dist/field/root.svelte

@@ -1,14 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateFieldProps,
     CreateFieldReturn,
   } from './create-field.svelte.js';
 
   export interface FieldProps
-    extends Assign<HTMLProps<'div'>, CreateFieldProps> {
-    asChild?: AsChild<CreateFieldReturn>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateFieldReturn>,
+      CreateFieldProps
+    > {}
 </script>
 
 <script lang="ts">
@@ -42,6 +43,6 @@
   {@render asChild(mergedProps, field)}
 {:else}
   <div {...mergedProps}>
-    {@render children?.()}
+    {@render children?.(field)}
   </div>
 {/if}

package/dist/field/select.svelte

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

package/dist/field/textarea.svelte

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

package/dist/file-upload/dropzone.svelte

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

package/dist/file-upload/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 FileUploadHiddenInputProps extends HTMLProps<'input'> {}
+  export interface FileUploadHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getFileUploadContext} from './context.svelte.js';
 
-  let {...props}: FileUploadHiddenInputProps = $props();
+  let {asChild, ...props}: FileUploadHiddenInputProps = $props();
 
   let fileUpload = getFileUploadContext();
 
@@ -17,4 +18,8 @@
   );
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/file-upload/item-delete-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 FileUploadItemDeleteTriggerProps
-    extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/file-upload/item-group.svelte

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

package/dist/file-upload/item-name.svelte

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

package/dist/file-upload/item-preview-image.svelte

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

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

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

package/dist/file-upload/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/file-upload';
 
   export interface FileUploadItemProps
-    extends Assign<HTMLProps<'div'>, ItemProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
 </script>
 
 <script lang="ts">

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

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

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

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

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

package/dist/hover-card/content.svelte

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

package/dist/hover-card/positioner.svelte

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

package/dist/hover-card/root.svelte

@@ -1,24 +1,32 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateHoverCardProps,
-    CreateHoverCardReturn,
-  } from './create-hover-card.svelte.js';
-
-  export interface HoverCardProps extends CreateHoverCardProps {
-    children?: Snippet<[hoverCard: CreateHoverCardReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {setHoverCardContext} from './context.svelte.js';
-  import {createHoverCard} from './create-hover-card.svelte.js';
-
-  let {children, ...props}: HoverCardProps = $props();
-
-  let hoverCard = createHoverCard(props);
-
-  setHoverCardContext(hoverCard);
-</script>
-
-{@render children?.(hoverCard)}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateHoverCardProps,
+    CreateHoverCardReturn,
+  } from './create-hover-card.svelte.js';
+
+  export interface HoverCardProps extends CreateHoverCardProps {
+    children?: Snippet<[CreateHoverCardReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {setHoverCardContext} from './context.svelte.js';
+  import {createHoverCard} from './create-hover-card.svelte.js';
+
+  let {children, ...props}: HoverCardProps = $props();
+
+  let hoverCard = createHoverCard(props);
+  let presence = createPresence({
+    get present() {
+      return hoverCard.open;
+    },
+  });
+
+  setHoverCardContext(hoverCard);
+  setPresenceContext(presence);
+</script>
+
+{@render children?.(hoverCard)}