ui-ingredients 0.0.25 → 0.0.26

package/dist/number-input/label.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface NumberInputLabelProps extends HtmlProps<'label'> {}
+  export interface NumberInputLabelProps extends HtmlProps<'label'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+  }
 </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 {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateNumberInputProps,
@@ -8,12 +8,15 @@
 
   export interface NumberInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, numberInput: 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 +46,7 @@
     onFocusChange,
     onValueChange,
     onValueInvalid,
+    asChild,
     children,
     ...props
   }: NumberInputProps = $props();
@@ -80,6 +84,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,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 NumberInputScrubberProps extends HtmlProps<'div'> {}
+  export interface NumberInputScrubberProps 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 {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,28 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {EllipsisProps} from '@zag-js/pagination';
+  import type {Snippet} from 'svelte';
 
-  export interface PaginationEllipsisProps extends Assign<HtmlProps<'span'>, EllipsisProps> {}
+  export interface PaginationEllipsisProps extends Assign<HtmlProps<'div'>, EllipsisProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </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}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/pagination/item.svelte

@@ -1,16 +1,19 @@
 <script lang="ts" module>
   import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/pagination';
+  import type {Snippet} from 'svelte';
 
   export interface PaginationItemProps
-    extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {}
+    extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </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 +28,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,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PaginationNextTriggerProps extends HtmlProps<'button'> {}
+  export interface PaginationNextTriggerProps 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 {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,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PaginationPrevTriggerProps extends HtmlProps<'button'> {}
+  export interface PaginationPrevTriggerProps 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 {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,19 @@
 <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 {CreatePaginationProps, CreatePaginationReturn} from './create-pagination.svelte.js';
 
   export interface PaginationProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, pagination: 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 +28,7 @@
     translations,
     onPageChange,
     onPageSizeChange,
+    asChild,
     children,
     ...props
   }: PaginationProps = $props();
@@ -47,6 +51,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,30 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PinInputClearTriggerProps extends HtmlProps<'button'> {}
+  export interface PinInputClearTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </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,26 @@
 <script lang="ts" module>
   import type {Assign, HtmlProps} from '../types.js';
   import type {InputProps} from '@zag-js/pin-input';
+  import type {Snippet} from 'svelte';
 
-  export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
+  export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+  }
 </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,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PinInputLabelProps extends HtmlProps<'label'> {}
+  export interface PinInputLabelProps extends HtmlProps<'label'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+  }
 </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}

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 {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?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, pinInput: 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,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 PopoverArrowTipProps extends HtmlProps<'div'> {}
+  export interface PopoverArrowTipProps 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}: 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}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/popover/arrow.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 PopoverArrowProps extends HtmlProps<'div'> {}
+  export interface PopoverArrowProps 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}: 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}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/popover/close-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface PopoverCloseTriggerProps extends HtmlProps<'button'> {}
+  export interface PopoverCloseTriggerProps 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}: 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,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 PopoverContentProps extends HtmlProps<'div'> {}
+  export interface PopoverContentProps 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}: 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}