ui-ingredients 0.0.39 → 0.0.40

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

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

package/dist/color-picker/area-background.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerAreaBackgroundProps extends HTMLProps<'div'> {}
+  export interface ColorPickerAreaBackgroundProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">
@@ -11,7 +12,7 @@
     getColorPickerContext,
   } from './context.svelte.js';
 
-  let {children, ...props}: ColorPickerAreaBackgroundProps = $props();
+  let {asChild, children, ...props}: ColorPickerAreaBackgroundProps = $props();
 
   let colorPicker = getColorPickerContext();
   let areaProps = getColorPickerAreaPropsContext();

package/dist/color-picker/area-thumb.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerAreaThumbProps extends HTMLProps<'div'> {}
+  export interface ColorPickerAreaThumbProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/area.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {AreaProps} from '@zag-js/color-picker';
 
   export interface ColorPickerAreaProps
-    extends Assign<HTMLProps<'div'>, AreaProps> {}
+    extends Assign<HtmlIngredientProps<'div'>, AreaProps> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/channel-input.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ChannelInputProps} from '@zag-js/color-picker';
 
   export interface ColorPickerChannelInputProps
-    extends Assign<HTMLProps<'input'>, ChannelInputProps> {}
+    extends Assign<HtmlIngredientProps<'input'>, ChannelInputProps> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/channel-slider-label.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ChannelProps} from '@zag-js/color-picker';
 
   export interface ColorPickerChannelSliderLabelProps
-    extends Assign<HTMLProps<'div'>, ChannelProps> {}
+    extends Assign<HtmlIngredientProps<'div'>, ChannelProps> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/channel-slider-thumb.svelte

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

package/dist/color-picker/channel-slider-track.svelte

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

package/dist/color-picker/channel-slider-value-text.svelte

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

package/dist/color-picker/channel-slider.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ChannelSliderProps} from '@zag-js/color-picker';
 
   export interface ColorPickerChannelSliderProps
-    extends Assign<HTMLProps<'div'>, ChannelSliderProps> {}
+    extends Assign<HtmlIngredientProps<'div'>, ChannelSliderProps> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/content.svelte

@@ -1,20 +1,28 @@
-<script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
-
-  export interface ColorPickerContentProps extends HTMLProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getColorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerContentProps = $props();
-
-  let colorPicker = getColorPickerContext();
-
-  let mergedProps = $derived(mergeProps(props, colorPicker.getContentProps()));
-</script>
-
-<div {...mergedProps}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ColorPickerContentProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerContentProps = $props();
+
+  let colorPicker = getColorPickerContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      colorPicker.getContentProps(),
+      presence.getPresenceProps(),
+    ),
+  );
+</script>
+
+<div use:presence.ref {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/control.svelte

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

package/dist/color-picker/eye-dropper-trigger.svelte

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

package/dist/color-picker/format-select.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerFormatSelectProps extends HTMLProps<'select'> {}
+  export interface ColorPickerFormatSelectProps
+    extends HtmlIngredientProps<'select'> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/format-trigger.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerFormatTriggerProps extends HTMLProps<'button'> {}
+  export interface ColorPickerFormatTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/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 ColorPickerHiddenInputProps extends HTMLProps<'input'> {}
+  export interface ColorPickerHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/label.svelte

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

package/dist/color-picker/positioner.svelte

@@ -1,22 +1,29 @@
-<script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
-
-  export interface ColorPickerPositionerProps extends HTMLProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getColorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerPositionerProps = $props();
-
-  let colorPicker = getColorPickerContext();
-
-  let mergedProps = $derived(
-    mergeProps(props, colorPicker.getPositionerProps()),
-  );
-</script>
-
-<div {...mergedProps}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ColorPickerPositionerProps
+    extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerPositionerProps = $props();
+
+  let colorPicker = getColorPickerContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      colorPicker.getPositionerProps(),
+      presence.getPresenceProps(),
+    ),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/root.svelte

@@ -1,60 +1,68 @@
-<script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateColorPickerProps,
-    CreateColorPickerReturn,
-  } from './create-color-picker.svelte.js';
-
-  export interface ColorPickerProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateColorPickerProps> {
-    children?: Snippet<[colorPicker: CreateColorPickerReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setColorPickerContext} from './context.svelte.js';
-  import {createColorPicker} from './create-color-picker.svelte.js';
-
-  let {children, ...props}: ColorPickerProps = $props();
-
-  let [colorPickerProps, otherProps] = $derived(
-    createSplitProps<CreateColorPickerProps>([
-      'id',
-      'ids',
-      'open',
-      'name',
-      'value',
-      'format',
-      'disabled',
-      'required',
-      'readOnly',
-      'defaultOpen',
-      'positioning',
-      'onOpenChange',
-      'closeOnSelect',
-      'initialFocusEl',
-      'onValueChange',
-      'onValueChangeEnd',
-      'onFocusOutside',
-      'onFormatChange',
-      'onInteractOutside',
-      'onPointerDownOutside',
-    ])(props),
-  );
-
-  let colorPicker = createColorPicker(reflect(() => colorPickerProps));
-
-  let mergedProps = $derived(
-    mergeProps(otherProps, colorPicker.getRootProps()),
-  );
-
-  setColorPickerContext(colorPicker);
-</script>
-
-<div {...mergedProps}>
-  {@render children?.(colorPicker)}
-</div>
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateColorPickerProps,
+    CreateColorPickerReturn,
+  } from './create-color-picker.svelte.js';
+
+  export interface ColorPickerProps
+    extends Assign<
+      HtmlIngredientProps<'div', CreateColorPickerReturn>,
+      CreateColorPickerProps
+    > {}
+</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 {setColorPickerContext} from './context.svelte.js';
+  import {createColorPicker} from './create-color-picker.svelte.js';
+
+  let {children, ...props}: ColorPickerProps = $props();
+
+  let [colorPickerProps, otherProps] = $derived(
+    createSplitProps<CreateColorPickerProps>([
+      'id',
+      'ids',
+      'open',
+      'name',
+      'value',
+      'format',
+      'disabled',
+      'required',
+      'readOnly',
+      'defaultOpen',
+      'positioning',
+      'onOpenChange',
+      'closeOnSelect',
+      'initialFocusEl',
+      'onValueChange',
+      'onValueChangeEnd',
+      'onFocusOutside',
+      'onFormatChange',
+      'onInteractOutside',
+      'onPointerDownOutside',
+    ])(props),
+  );
+
+  let colorPicker = createColorPicker(reflect(() => colorPickerProps));
+  let presence = createPresence({
+    get present() {
+      return colorPickerProps.open;
+    },
+  });
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, colorPicker.getRootProps()),
+  );
+
+  setColorPickerContext(colorPicker);
+  setPresenceContext(presence);
+</script>
+
+<div {...mergedProps}>
+  {@render children?.(colorPicker)}
+</div>

package/dist/color-picker/swatch-group.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerSwatchGroupProps extends HTMLProps<'div'> {}
+  export interface ColorPickerSwatchGroupProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/swatch-indicator.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerSwatchIndicatorProps extends HTMLProps<'div'> {}
+  export interface ColorPickerSwatchIndicatorProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/swatch-trigger.svelte

@@ -1,9 +1,12 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {SwatchTriggerProps} from '@zag-js/color-picker';
 
   export interface ColorPickerSwatchTriggerProps
-    extends Assign<HTMLProps<'button'>, Pick<SwatchTriggerProps, 'disabled'>> {}
+    extends Assign<
+      HtmlIngredientProps<'button'>,
+      Pick<SwatchTriggerProps, 'disabled'>
+    > {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/swatch.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {SwatchProps} from '@zag-js/color-picker';
 
   export interface ColorPickerSwatchProps
-    extends Assign<HTMLProps<'div'>, SwatchProps> {}
+    extends Assign<HtmlIngredientProps<'div'>, SwatchProps> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/transparency-grid.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {TransparencyGridProps} from '@zag-js/color-picker';
 
   export interface ColorPickerTransparencyGridProps
-    extends Assign<HTMLProps<'div'>, TransparencyGridProps> {}
+    extends Assign<HtmlIngredientProps<'div'>, TransparencyGridProps> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/trigger.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerTriggerProps extends HTMLProps<'button'> {}
+  export interface ColorPickerTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/color-picker/value-text.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ColorPickerValueTextProps extends HTMLProps<'div'> {}
+  export interface ColorPickerValueTextProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

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

package/dist/combobox/content.svelte

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

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