ui-ingredients 0.0.25 → 0.0.27

package/dist/menu/trigger-item.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuTriggerItemIndicatorProps extends HtmlProps<'button'> {}
+  export interface MenuTriggerItemIndicatorProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuTriggerItemIndicatorProps = $props();
+  let {asChild, children, ...props}: MenuTriggerItemIndicatorProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getTriggerItemProps(menu)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/menu/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 MenuTriggerProps extends HtmlProps<'button'> {}
+  export interface MenuTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuTriggerProps = $props();
+  let {asChild, children, ...props}: MenuTriggerProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.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/number-input/control.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface NumberInputControlTriggerProps extends HtmlProps<'div'> {}
+  export interface NumberInputControlTriggerProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {numberInputContext} from './context.svelte.js';
 
-  let {children, ...props}: NumberInputControlTriggerProps = $props();
+  let {asChild, children, ...props}: NumberInputControlTriggerProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getControlProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/number-input/decrement-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 NumberInputDecrementTriggerProps extends HtmlProps<'button'> {}
+  export interface NumberInputDecrementTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {numberInputContext} from './context.svelte.js';
 
-  let {children, ...props}: NumberInputDecrementTriggerProps = $props();
+  let {asChild, children, ...props}: NumberInputDecrementTriggerProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getDecrementTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/number-input/increment-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 NumberInputIncrementTriggerProps extends HtmlProps<'button'> {}
+  export interface NumberInputIncrementTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {numberInputContext} from './context.svelte.js';
 
-  let {children, ...props}: NumberInputIncrementTriggerProps = $props();
+  let {asChild, children, ...props}: NumberInputIncrementTriggerProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getIncrementTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/number-input/input.svelte

@@ -1,18 +1,24 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface NumberInputInputProps extends HtmlProps<'input'> {}
+  export interface NumberInputInputProps extends HtmlProps<'input'> {
+    asChild?: AsChild<HtmlProps<'input'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {numberInputContext} from './context.svelte.js';
 
-  let {...props}: NumberInputInputProps = $props();
+  let {asChild, ...props}: NumberInputInputProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getInputProps()));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

package/dist/number-input/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 NumberInputLabelProps extends HtmlProps<'label'> {}
+  export interface NumberInputLabelProps extends HtmlProps<'label'> {
+    asChild?: AsChild<HtmlProps<'label'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {numberInputContext} from './context.svelte.js';
 
-  let {children, ...props}: NumberInputLabelProps = $props();
+  let {asChild, children, ...props}: NumberInputLabelProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getLabelProps()));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/number-input/root.svelte

@@ -1,5 +1,5 @@
 <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 {
     CreateNumberInputProps,
@@ -8,12 +8,13 @@
 
   export interface NumberInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateNumberInputReturn>;
     children?: Snippet<[numberInput: CreateNumberInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {numberInputContext} from './context.svelte.js';
   import {createNumberInput} from './create-number-input.svelte.js';
 
@@ -43,6 +44,7 @@
     onFocusChange,
     onValueChange,
     onValueInvalid,
+    asChild,
     children,
     ...props
   }: NumberInputProps = $props();
@@ -80,6 +82,10 @@
   numberInputContext.set(numberInput);
 </script>
 
-<div {...attrs}>
-  {@render children?.(numberInput)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, numberInput)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(numberInput)}
+  </div>
+{/if}

package/dist/number-input/scrubber.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface NumberInputScrubberProps extends HtmlProps<'div'> {}
+  export interface NumberInputScrubberProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {numberInputContext} from './context.svelte.js';
 
-  let {children, ...props}: NumberInputScrubberProps = $props();
+  let {asChild, children, ...props}: NumberInputScrubberProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getScrubberProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/pagination/ellipsis.svelte

@@ -1,21 +1,27 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {EllipsisProps} from '@zag-js/pagination';
 
-  export interface PaginationEllipsisProps extends Assign<HtmlProps<'span'>, EllipsisProps> {}
+  export interface PaginationEllipsisProps extends Assign<HtmlProps<'span'>, EllipsisProps> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {paginationContext} from './context.svelte.js';
 
-  let {index, children, ...props}: PaginationEllipsisProps = $props();
+  let {index, asChild, children, ...props}: PaginationEllipsisProps = $props();
 
   let pagination = paginationContext.get();
 
   let attrs = $derived(mergeProps(props, pagination.getEllipsisProps({index})));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/pagination/item.svelte

@@ -1,16 +1,18 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/pagination';
 
   export interface PaginationItemProps
-    extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {}
+    extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {paginationContext} from './context.svelte.js';
 
-  let {value, children, ...props}: PaginationItemProps = $props();
+  let {value, asChild, children, ...props}: PaginationItemProps = $props();
 
   let pagination = paginationContext.get();
 
@@ -25,6 +27,10 @@
   );
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/pagination/next-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 PaginationNextTriggerProps extends HtmlProps<'button'> {}
+  export interface PaginationNextTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {paginationContext} from './context.svelte.js';
 
-  let {children, ...props}: PaginationNextTriggerProps = $props();
+  let {asChild, children, ...props}: PaginationNextTriggerProps = $props();
 
   let pagination = paginationContext.get();
 
   let attrs = $derived(mergeProps(props, pagination.getNextTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/pagination/prev-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 PaginationPrevTriggerProps extends HtmlProps<'button'> {}
+  export interface PaginationPrevTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {paginationContext} from './context.svelte.js';
 
-  let {children, ...props}: PaginationPrevTriggerProps = $props();
+  let {asChild, children, ...props}: PaginationPrevTriggerProps = $props();
 
   let pagination = paginationContext.get();
 
   let attrs = $derived(mergeProps(props, pagination.getPrevTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/pagination/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 {CreatePaginationProps, CreatePaginationReturn} from './create-pagination.svelte.js';
 
   export interface PaginationProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
+    asChild?: AsChild<GenericHtmlProps, CreatePaginationReturn>;
     children?: Snippet<[pagination: CreatePaginationReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {paginationContext} from './context.svelte.js';
   import {createPagination} from './create-pagination.svelte.js';
 
@@ -25,6 +26,7 @@
     translations,
     onPageChange,
     onPageSizeChange,
+    asChild,
     children,
     ...props
   }: PaginationProps = $props();
@@ -47,6 +49,10 @@
   paginationContext.set(pagination);
 </script>
 
-<div {...attrs}>
-  {@render children?.(pagination)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, pagination)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(pagination)}
+  </div>
+{/if}

package/dist/pin-input/anatomy.js

@@ -0,0 +1,3 @@
+import { anatomy as _ } from '@zag-js/pin-input';
+export const anatomy = _.extendWith('clearTrigger');
+export const parts = anatomy.build();

package/dist/pin-input/clear-trigger.svelte

@@ -1,24 +1,29 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface PinInputClearTriggerProps extends HtmlProps<'button'> {}
+  export interface PinInputClearTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {parts} from './anatomy.js';
   import {pinInputContext} from './context.svelte.js';
 
-  let {children, onclick, ...props}: PinInputClearTriggerProps = $props();
+  let {asChild, children, onclick, ...props}: PinInputClearTriggerProps = $props();
 
   let pinInput = pinInputContext.get();
+
+  let attrs = $derived(
+    mergeProps(props, parts.clearTrigger.attrs, pinInput.getClearTriggerProps()),
+  );
 </script>
 
-<button
-  type="button"
-  onclick={(e) => {
-    onclick?.(e);
-    pinInput.clearValue();
-  }}
-  {...props}
->
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -1,7 +1,9 @@
+import type { HtmlProps } from '../types.js';
 import * as pinInput from '@zag-js/pin-input';
 export interface CreatePinInputProps extends Omit<pinInput.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
 export interface CreatePinInputReturn extends pinInput.Api {
+    getClearTriggerProps(): HtmlProps<'button'>;
 }
 export declare function createPinInputContext(props: CreatePinInputProps): CreatePinInputReturn;

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

@@ -12,6 +12,18 @@ export function createPinInputContext(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => pinInput.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = pinInput.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getClearTriggerProps() {
+                return {
+                    onclick() {
+                        o.clearValue();
+                    },
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/pin-input/hidden-input.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {pinInputContext} from './context.svelte.js';
 
   let {...props}: PinInputHiddenInputProps = $props();

package/dist/pin-input/input.svelte

@@ -1,19 +1,25 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {InputProps} from '@zag-js/pin-input';
 
-  export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
+  export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {
+    asChild?: AsChild<HtmlProps<'input'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {pinInputContext} from './context.svelte.js';
 
-  let {index, ...props}: PinInputInputProps = $props();
+  let {index, asChild, ...props}: PinInputInputProps = $props();
 
   let pinInput = pinInputContext.get();
 
   let attrs = $derived(mergeProps(props, pinInput.getInputProps({index})));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

package/dist/pin-input/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 PinInputLabelProps extends HtmlProps<'label'> {}
+  export interface PinInputLabelProps extends HtmlProps<'label'> {
+    asChild?: AsChild<HtmlProps<'label'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {pinInputContext} from './context.svelte.js';
 
-  let {children, ...props}: PinInputLabelProps = $props();
+  let {asChild, children, ...props}: PinInputLabelProps = $props();
 
   let pinInput = pinInputContext.get();
 
   let attrs = $derived(mergeProps(props, pinInput.getLabelProps()));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}