ui-ingredients 0.0.39 → 0.0.41

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

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

package/dist/date-picker/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 {
-    CreateDatePickerProps,
-    CreateDatePickerReturn,
-  } from './create-date-picker.svelte.js';
-
-  export interface DatePickerProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateDatePickerProps> {
-    asChild?: AsChild<CreateDatePickerReturn>;
-    children?: Snippet<[CreateDatePickerReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setDatePickerContext} from './context.svelte.js';
-  import {createDatePicker} from './create-date-picker.svelte.js';
-
-  let {asChild, children, ...props}: DatePickerProps = $props();
-
-  let [datePickerProps, otherProps] = $derived(
-    createSplitProps<CreateDatePickerProps>([
-      'id',
-      'ids',
-      'min',
-      'max',
-      'name',
-      'open',
-      'view',
-      'value',
-      'modal',
-      'format',
-      'locale',
-      'disabled',
-      'readOnly',
-      'timeZone',
-      'fixedWeeks',
-      'startOfWeek',
-      'defaultOpen',
-      'positioning',
-      'numOfMonths',
-      'translations',
-      'focusedValue',
-      'closeOnSelect',
-      'selectionMode',
-      'onViewChange',
-      'onOpenChange',
-      'onValueChange',
-      'onFocusChange',
-      'isDateUnavailable',
-    ])(props),
-  );
-
-  let datePicker = createDatePicker(reflect(() => datePickerProps));
-
-  let mergedProps = $derived(mergeProps(otherProps, datePicker.getRootProps()));
-
-  setDatePickerContext(datePicker);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, datePicker)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.(datePicker)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateDatePickerProps,
+    CreateDatePickerReturn,
+  } from './create-date-picker.svelte.js';
+
+  export interface DatePickerProps
+    extends Assign<
+      HtmlIngredientProps<'div', CreateDatePickerReturn>,
+      CreateDatePickerProps
+    > {}
+</script>
+
+<script lang="ts">
+  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 {setDatePickerContext} from './context.svelte.js';
+  import {createDatePicker} from './create-date-picker.svelte.js';
+
+  let {asChild, children, ...props}: DatePickerProps = $props();
+
+  let [datePickerProps, otherProps] = $derived(
+    createSplitProps<CreateDatePickerProps>([
+      'id',
+      'ids',
+      'min',
+      'max',
+      'name',
+      'open',
+      'view',
+      'value',
+      'modal',
+      'format',
+      'locale',
+      'disabled',
+      'readOnly',
+      'timeZone',
+      'fixedWeeks',
+      'startOfWeek',
+      'defaultOpen',
+      'positioning',
+      'numOfMonths',
+      'translations',
+      'focusedValue',
+      'closeOnSelect',
+      'selectionMode',
+      'onViewChange',
+      'onOpenChange',
+      'onValueChange',
+      'onFocusChange',
+      'isDateUnavailable',
+    ])(props),
+  );
+
+  let datePicker = createDatePicker(reflect(() => datePickerProps));
+  let presence = createPresence({
+    get present() {
+      return datePicker.open;
+    },
+  });
+
+  let mergedProps = $derived(mergeProps(otherProps, datePicker.getRootProps()));
+
+  setDatePickerContext(datePicker);
+  setPresenceContext(presence);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, datePicker)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(datePicker)}
+  </div>
+{/if}

package/dist/date-picker/table-body.svelte

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

package/dist/date-picker/table-head.svelte

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

package/dist/date-picker/table-header.svelte

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

package/dist/date-picker/table-row.svelte

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

package/dist/date-picker/table.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 {TableProps} from '@zag-js/date-picker';
 
   export interface DatePickerTableProps
-    extends Assign<HTMLProps<'table'>, Omit<TableProps, 'view'>> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'table'>, Omit<TableProps, 'view'>> {}
 </script>
 
 <script lang="ts">

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

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

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

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

package/dist/date-picker/year-select.svelte

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

package/dist/date-picker/year-table-cell-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 DatePickerYearTableCellTriggerProps
-    extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/date-picker/year-table-cell.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 {TableCellProps, TableCellState} from '@zag-js/date-picker';
-  import type {Snippet} from 'svelte';
 
   export interface DatePickerYearTableCellProps
-    extends Assign<Omit<HTMLProps<'td'>, 'children'>, TableCellProps> {
-    asChild?: AsChild<TableCellState>;
-    children?: Snippet<[TableCellState]>;
-  }
+    extends Assign<HtmlIngredientProps<'td', TableCellState>, TableCellProps> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/backdrop.svelte

@@ -1,26 +1,34 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface DialogBackdropProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDialogContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: DialogBackdropProps = $props();
-
-  let dialog = getDialogContext();
-
-  let mergedProps = $derived(mergeProps(props, dialog.getBackdropProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface DialogBackdropProps
+    extends HtmlIngredientProps<'div', never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getDialogContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: DialogBackdropProps = $props();
+
+  let dialog = getDialogContext();
+  let presence = createPresence({
+    get present() {
+      return dialog.open;
+    },
+  });
+
+  let mergedProps = $derived(
+    mergeProps(props, dialog.getBackdropProps(), presence.getPresenceProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(presence.ref, mergedProps)}
+{:else}
+  <div use:presence.ref {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

package/dist/dialog/content.svelte

@@ -1,26 +1,30 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface DialogContentProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getDialogContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: DialogContentProps = $props();
-
-  let dialog = getDialogContext();
-
-  let mergedProps = $derived(mergeProps(props, dialog.getContentProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface DialogContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getDialogContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: DialogContentProps = $props();
+
+  let dialog = getDialogContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, dialog.getContentProps(), presence.getPresenceProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(presence.ref, mergedProps)}
+{:else}
+  <div use:presence.ref {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/dialog/description.svelte

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

package/dist/dialog/positioner.svelte

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

package/dist/dialog/root.svelte

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

package/dist/dialog/title.svelte

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

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