ui-ingredients 0.0.25 → 0.0.26

package/dist/popover/description.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PopoverDescriptionProps extends HtmlProps<'div'> {}
+  export interface PopoverDescriptionProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {popoverContext} from './context.svelte.js';
 
-  let {children, ...props}: PopoverDescriptionProps = $props();
+  let {asChild, children, ...props}: PopoverDescriptionProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getDescriptionProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/popover/positioner.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PopoverPositionerProps extends HtmlProps<'div'> {}
+  export interface PopoverPositionerProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {popoverContext} from './context.svelte.js';
 
-  let {children, ...props}: PopoverPositionerProps = $props();
+  let {asChild, children, ...props}: PopoverPositionerProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/popover/title.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PopoverTitleProps extends HtmlProps<'div'> {}
+  export interface PopoverTitleProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {popoverContext} from './context.svelte.js';
 
-  let {children, ...props}: PopoverTitleProps = $props();
+  let {asChild, children, ...props}: PopoverTitleProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getTitleProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/popover/trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PopoverTriggerProps extends HtmlProps<'button'> {}
+  export interface PopoverTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {popoverContext} from './context.svelte.js';
 
-  let {children, ...props}: PopoverTriggerProps = $props();
+  let {asChild, children, ...props}: PopoverTriggerProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/presence/context.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Context } from '../utils.svelte.js';
+import type { CreatePresenceReturn } from './create-presence.svelte.js';
+export declare const presenceContext: Context<CreatePresenceReturn>;

package/dist/presence/context.svelte.js

@@ -0,0 +1,2 @@
+import { Context } from '../utils.svelte.js';
+export const presenceContext = new Context('Presence');

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

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

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

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

package/dist/presence/root.svelte

@@ -6,27 +6,27 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {createPresence} from './create-presence.svelte.js';
 
   let {
     /**/
-    present,
-    immediate,
-    onExitComplete,
+    present = $bindable(false),
+    keepMounted,
     children,
     ...props
   }: PresenceProps = $props();
 
   let presence = createPresence({
     present,
-    immediate,
-    onExitComplete,
+    keepMounted,
   });
 
   let attrs = $derived(mergeProps(props, presence.getRootProps()));
 </script>
 
-<div use:presence.ref {...attrs}>
-  {@render children?.()}
-</div>
+{#if !presence.unmounted}
+  <div use:presence.ref {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/presence/root.svelte.d.ts

@@ -13,6 +13,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Root: $$__sveltets_2_IsomorphicComponent<PresenceProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "present">;
 type Root = InstanceType<typeof Root>;
 export default Root;

package/dist/progress/circle-range.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressCircleRangeProps extends HtmlProps<'circle'> {}
+  export interface ProgressCircleRangeProps extends HtmlProps<'circle'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'circle'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {children, ...props}: ProgressCircleRangeProps = $props();
+  let {asChild, children, ...props}: ProgressCircleRangeProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getCircleRangeProps()));
 </script>
 
-<circle {...attrs}>
-  {@render children?.()}
-</circle>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <circle {...attrs}>
+    {@render children?.()}
+  </circle>
+{/if}

package/dist/progress/circle-track.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressCircleTrackProps extends HtmlProps<'circle'> {}
+  export interface ProgressCircleTrackProps extends HtmlProps<'circle'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'circle'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {children, ...props}: ProgressCircleTrackProps = $props();
+  let {asChild, children, ...props}: ProgressCircleTrackProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getCircleTrackProps()));
 </script>
 
-<circle {...attrs}>
-  {@render children?.()}
-</circle>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <circle {...attrs}>
+    {@render children?.()}
+  </circle>
+{/if}

package/dist/progress/circle.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressCircleProps extends HtmlProps<'svg'> {}
+  export interface ProgressCircleProps extends HtmlProps<'svg'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'svg'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {children, ...props}: ProgressCircleProps = $props();
+  let {asChild, children, ...props}: ProgressCircleProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getCircleProps()));
 </script>
 
-<svg {...attrs}>
-  {@render children?.()}
-</svg>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <svg {...attrs}>
+    {@render children?.()}
+  </svg>
+{/if}

package/dist/progress/label.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressLabelProps extends HtmlProps<'div'> {}
+  export interface ProgressLabelProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {children, ...props}: ProgressLabelProps = $props();
+  let {asChild, children, ...props}: ProgressLabelProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getLabelProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/progress/range.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressRangeProps extends HtmlProps<'div'> {}
+  export interface ProgressRangeProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {children, ...props}: ProgressRangeProps = $props();
+  let {asChild, children, ...props}: ProgressRangeProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getRangeProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/progress/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateProgressProps, CreateProgressReturn} from './create-progress.svelte.js';
 
   export interface ProgressProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateProgressProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
     children?: Snippet<[progress: CreateProgressReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
 
@@ -23,6 +24,7 @@
     value,
     orientation,
     translations,
+    asChild,
     children,
     ...props
   }: ProgressProps = $props();
@@ -42,6 +44,10 @@
   progressContext.set(progress);
 </script>
 
-<div {...attrs}>
-  {@render children?.(progress)}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(progress)}
+  </div>
+{/if}

package/dist/progress/track.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressTrackProps extends HtmlProps<'div'> {}
+  export interface ProgressTrackProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {children, ...props}: ProgressTrackProps = $props();
+  let {asChild, children, ...props}: ProgressTrackProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getTrackProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/progress/value-text.svelte

@@ -1,24 +1,31 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressValueTextProps extends HtmlProps<'div'> {}
+  export interface ProgressValueTextProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {children, ...props}: ProgressValueTextProps = $props();
+  let {asChild, children, ...props}: ProgressValueTextProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getValueTextProps()));
 </script>
 
-<div {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {progress.percentAsString}
-  {/if}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {progress.percentAsString}
+    {/if}
+  </div>
+{/if}

package/dist/progress/view.svelte

@@ -1,21 +1,28 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ViewProps} from '@zag-js/progress';
+  import type {Snippet} from 'svelte';
 
-  export interface ProgressViewProps extends Assign<HtmlProps<'div'>, ViewProps> {}
+  export interface ProgressViewProps extends Assign<HtmlProps<'div'>, ViewProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {progressContext} from './context.svelte.js';
 
-  let {state, children, ...props}: ProgressViewProps = $props();
+  let {state, asChild, children, ...props}: ProgressViewProps = $props();
 
   let progress = progressContext.get();
 
   let attrs = $derived(mergeProps(props, progress.getViewProps({state})));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/qr-code/frame.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface QRCodeFrameProps extends HtmlProps<'svg'> {}
+  export interface QRCodeFrameProps extends HtmlProps<'svg'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'svg'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {qrCodeContext} from './context.svelte.js';
 
-  let {children, ...props}: QRCodeFrameProps = $props();
+  let {asChild, children, ...props}: QRCodeFrameProps = $props();
 
   let qrCode = qrCodeContext.get();
 
   let attrs = $derived(mergeProps(props, qrCode.getFrameProps()));
 </script>
 
-<svg {...attrs}>
-  {@render children?.()}
-</svg>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <svg {...attrs}>
+    {@render children?.()}
+  </svg>
+{/if}

package/dist/qr-code/overlay.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface QRCodeOverlayProps extends HtmlProps<'div'> {}
+  export interface QRCodeOverlayProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {qrCodeContext} from './context.svelte.js';
 
-  let {children, ...props}: QRCodeOverlayProps = $props();
+  let {asChild, children, ...props}: QRCodeOverlayProps = $props();
 
   let qrCode = qrCodeContext.get();
 
   let attrs = $derived(mergeProps(props, qrCode.getOverlayProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}