ui-ingredients 0.0.25 → 0.0.27

package/dist/pin-input/pin-input.d.ts

@@ -1,4 +1,4 @@
-export { anatomy } from '@zag-js/pin-input';
+export { anatomy } from './anatomy.js';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Input } from './input.svelte';

package/dist/pin-input/pin-input.js

@@ -1,4 +1,4 @@
-export { anatomy } from '@zag-js/pin-input';
+export { anatomy } from './anatomy.js';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Input } from './input.svelte';

package/dist/pin-input/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreatePinInputProps, CreatePinInputReturn} from './create-pin-input.svelte.js';
 
   export interface PinInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePinInputProps> {
+    asChild?: AsChild<GenericHtmlProps, CreatePinInputReturn>;
     children?: Snippet<[pinInput: CreatePinInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {pinInputContext} from './context.svelte.js';
   import {createPinInputContext} from './create-pin-input.svelte.js';
 
@@ -36,6 +37,7 @@
     onValueChange,
     onValueInvalid,
     onValueComplete,
+    asChild,
     children,
     ...props
   }: PinInputProps = $props();
@@ -69,6 +71,10 @@
   pinInputContext.set(pinInput);
 </script>
 
-<div {...attrs}>
-  {@render children?.(pinInput)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, pinInput)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(pinInput)}
+  </div>
+{/if}

package/dist/popover/arrow-tip.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverArrowTipProps extends HtmlProps<'div'> {}
+  export interface PopoverArrowTipProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}: PopoverArrowTipProps = $props();
+  let {asChild, children, ...props}: PopoverArrowTipProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getArrowTipProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/popover/arrow.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverArrowProps extends HtmlProps<'div'> {}
+  export interface PopoverArrowProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}: PopoverArrowProps = $props();
+  let {asChild, children, ...props}: PopoverArrowProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getArrowProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/popover/close-trigger.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverCloseTriggerProps extends HtmlProps<'button'> {}
+  export interface PopoverCloseTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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}: PopoverCloseTriggerProps = $props();
+  let {asChild, children, ...props}: PopoverCloseTriggerProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getCloseTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/popover/content.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverContentProps extends HtmlProps<'div'> {}
+  export interface PopoverContentProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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}: PopoverContentProps = $props();
+  let {asChild, children, ...props}: PopoverContentProps = $props();
 
   let popover = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, popover.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/popover/description.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverDescriptionProps extends HtmlProps<'div'> {}
+  export interface PopoverDescriptionProps extends HtmlProps<'p'> {
+    asChild?: AsChild;
+  }
 </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}
+  <p {...attrs}>
+    {@render children?.()}
+  </p>
+{/if}

package/dist/popover/positioner.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverPositionerProps extends HtmlProps<'div'> {}
+  export interface PopoverPositionerProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverTitleProps extends HtmlProps<'div'> {}
+  export interface PopoverTitleProps extends HtmlProps<'h2'> {
+    asChild?: AsChild;
+  }
 </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}
+  <h2 {...attrs}>
+    {@render children?.()}
+  </h2>
+{/if}

package/dist/popover/trigger.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PopoverTriggerProps extends HtmlProps<'button'> {}
+  export interface PopoverTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ProgressCircleRangeProps extends HtmlProps<'circle'> {}
+  export interface ProgressCircleRangeProps extends HtmlProps<'circle'> {
+    asChild?: AsChild<HtmlProps<'circle'>>;
+  }
 </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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ProgressCircleTrackProps extends HtmlProps<'circle'> {}
+  export interface ProgressCircleTrackProps extends HtmlProps<'circle'> {
+    asChild?: AsChild<HtmlProps<'circle'>>;
+  }
 </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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ProgressCircleProps extends HtmlProps<'svg'> {}
+  export interface ProgressCircleProps extends HtmlProps<'svg'> {
+    asChild?: AsChild<HtmlProps<'svg'>>;
+  }
 </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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ProgressLabelProps extends HtmlProps<'div'> {}
+  export interface ProgressLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/progress/range.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface ProgressRangeProps extends HtmlProps<'div'> {}
+  export interface ProgressRangeProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </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}