ui-ingredients 0.0.39 → 0.0.41

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">

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

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

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

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

package/dist/popover/content.svelte

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

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

package/dist/popover/positioner.svelte

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

package/dist/popover/root.svelte

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

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

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

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

@@ -1,17 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
 export interface CreatePresenceProps {
     present?: boolean;
-    keepMounted?: boolean;
 }
 export interface CreatePresenceReturn extends ReturnType<typeof createPresence> {
 }
 export declare function createPresence(props: CreatePresenceProps): {
-    ref: (node: HTMLElement) => {
-        update: (elem: HTMLElement) => void;
-        destroy(): void;
-    };
-    getRootProps: () => {
-        hidden: boolean;
-        'data-state': string | undefined;
-    };
-    readonly unmounted: boolean;
+    ref: (node: HTMLElement) => void;
+    getPresenceProps: () => HTMLAttributes<HTMLElement>;
 };

package/dist/presence/create-presence.svelte.js

@@ -1,36 +1,27 @@
 import * as presence from '@zag-js/presence';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { tick } from 'svelte';
 export function createPresence(props) {
-    const context = $derived(reflect(() => ({
-        present: props.present,
-        immediate: false,
-    })));
+    const context = $derived({
+        get present() {
+            return props.present;
+        },
+    });
     const [state, send] = useMachine(presence.machine(context), { context });
     const api = $derived(presence.connect(state, send, normalizeProps));
-    function ref(node) {
-        function update(elem) {
-            api.setNode(elem);
-        }
-        update(node);
-        return {
-            update,
-            destroy() {
-                api.setNode(null);
-            },
-        };
-    }
-    const unmounted = $derived(!api.present && !props.keepMounted);
-    function getRootProps() {
+    function getPresenceProps() {
         return {
             hidden: !api.present,
-            'data-state': api.skip ? undefined : api.present ? 'open' : 'closed',
+            'data-state': context.present ? 'open' : 'closed',
         };
     }
+    function ref(node) {
+        tick().then(() => {
+            api.setNode(node);
+        });
+    }
     return {
         ref,
-        getRootProps,
-        get unmounted() {
-            return unmounted;
-        },
+        getPresenceProps,
     };
 }

package/dist/presence/root.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {Assign, HTMLProps} from '../types.js';
-  import type {CreatePresenceProps} from './create-presence.svelte.js';
-
-  export interface PresenceProps
-    extends Assign<HTMLProps<'div'>, CreatePresenceProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {createPresence} from './create-presence.svelte.js';
-
-  let {children, ...props}: PresenceProps = $props();
-
-  let [presenceProps, otherProps] = $derived(
-    createSplitProps<CreatePresenceProps>(['present', 'keepMounted'])(props),
-  );
-
-  let presence = createPresence(reflect(() => presenceProps));
-
-  let mergedProps = $derived(mergeProps(otherProps, presence.getRootProps()));
-</script>
-
-{#if !presence.unmounted}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {CreatePresenceProps} from './create-presence.svelte.js';
+
+  export interface PresenceProps
+    extends Assign<HtmlProps<'div'>, CreatePresenceProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {createPresence} from './create-presence.svelte.js';
+
+  let {children, ...props}: PresenceProps = $props();
+
+  let [presenceProps, otherProps] = $derived(
+    createSplitProps<CreatePresenceProps>(['present'])(props),
+  );
+
+  let presence = createPresence(reflect(() => presenceProps));
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, presence.getPresenceProps()),
+  );
+</script>
+
+<div use:presence.ref {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/progress/circle-range.svelte

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

package/dist/progress/circle-track.svelte

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

package/dist/progress/circle.svelte

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

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

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

package/dist/progress/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 {
     CreateProgressProps,
     CreateProgressReturn,
   } from './create-progress.svelte.js';
 
   export interface ProgressProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateProgressProps> {
-    asChild?: AsChild;
-    children?: Snippet<[progress: CreateProgressReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateProgressReturn>,
+      CreateProgressProps
+    > {}
 </script>
 
 <script lang="ts">
@@ -42,7 +41,7 @@
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps)}
+  {@render asChild(mergedProps, progress)}
 {:else}
   <div {...mergedProps}>
     {@render children?.(progress)}

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

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

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

package/dist/qr-code/frame.svelte

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

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/pattern.svelte

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