ui-ingredients 0.0.25 → 0.0.27

package/dist/carousel/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 {CreateCarouselProps, CreateCarouselReturn} from './create-carousel.svelte.js';
 
   export interface CarouselProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCarouselProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateCarouselReturn>;
     children?: Snippet<[carousel: CreateCarouselReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {carouselContext} from './context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
 
@@ -24,6 +25,7 @@
     orientation,
     slidesPerView,
     onIndexChange,
+    asChild,
     children,
     ...props
   }: CarouselProps = $props();
@@ -45,6 +47,10 @@
   carouselContext.set(carousel);
 </script>
 
-<div {...attrs}>
-  {@render children?.(carousel)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, carousel)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(carousel)}
+  </div>
+{/if}

package/dist/carousel/viewport.svelte

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

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

package/dist/checkbox/hidden-input.svelte

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

package/dist/checkbox/indicator.svelte

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

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

package/dist/checkbox/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateCheckboxProps, CreateCheckboxReturn} from './create-checkbox.svelte.js';
 
   export interface CheckboxProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateCheckboxProps> {
+    asChild?: AsChild<HtmlProps<'label'>, CreateCheckboxReturn>;
     children?: Snippet<[checkbox: CreateCheckboxReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {checkboxContext} from './context.svelte.js';
   import {createCheckbox} from './create-checkbox.svelte.js';
 
@@ -26,6 +27,7 @@
     readOnly,
     required,
     onCheckedChange,
+    asChild,
     children,
     ...props
   }: CheckboxProps = $props();
@@ -49,6 +51,10 @@
   checkboxContext.set(checkbox);
 </script>
 
-<label {...attrs}>
-  {@render children?.(checkbox)}
-</label>
+{#if asChild}
+  {@render asChild(attrs, checkbox)}
+{:else}
+  <label {...attrs}>
+    {@render children?.(checkbox)}
+  </label>
+{/if}

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

package/dist/clipboard/indicator.svelte

@@ -1,22 +1,28 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/clipboard';
 
   export interface ClipboardIndicatorProps
-    extends Assign<HtmlProps<'span'>, Partial<IndicatorProps>> {}
+    extends Assign<HtmlProps<'span'>, Partial<IndicatorProps>> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {clipboardContext} from './context.svelte.js';
 
-  let {copied = false, children, ...props}: ClipboardIndicatorProps = $props();
+  let {copied = false, asChild, children, ...props}: ClipboardIndicatorProps = $props();
 
   let clipboard = clipboardContext.get();
 
   let attrs = $derived(mergeProps(props, clipboard.getIndicatorProps({copied})));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

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

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

package/dist/clipboard/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 {CreateClipboardProps, CreateClipboardReturn} from './create-clipboard.svelte.js';
 
   export interface ClipboardProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateClipboardProps> {
+    asChild?: AsChild<GenericHtmlProps, CreateClipboardReturn>;
     children?: Snippet<[clipboard: CreateClipboardReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {clipboardContext} from './context.svelte.js';
   import {createClipboard} from './create-clipboard.svelte.js';
 
@@ -21,6 +22,7 @@
     value,
     timeout,
     onStatusChange,
+    asChild,
     children,
     ...props
   }: ClipboardProps = $props();
@@ -38,6 +40,10 @@
   clipboardContext.set(clipboard);
 </script>
 
-<div {...attrs}>
-  {@render children?.(clipboard)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, clipboard)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(clipboard)}
+  </div>
+{/if}

package/dist/clipboard/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 ClipboardTriggerProps extends HtmlProps<'button'> {}
+  export interface ClipboardTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {clipboardContext} from './context.svelte.js';
 
-  let {children, ...props}: ClipboardTriggerProps = $props();
+  let {asChild, children, ...props}: ClipboardTriggerProps = $props();
 
   let clipboard = clipboardContext.get();
 
   let attrs = $derived(mergeProps(props, clipboard.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/collapsible/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 CollapsibleContentProps extends HtmlProps<'div'> {}
+  export interface CollapsibleContentProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {collapsibleContext} from './context.svelte.js';
 
-  let {children, ...props}: CollapsibleContentProps = $props();
+  let {asChild, children, ...props}: CollapsibleContentProps = $props();
 
   let collapsible = collapsibleContext.get();
 
   let attrs = $derived(mergeProps(props, collapsible.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/collapsible/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 {
     CreateCollapsibleProps,
@@ -8,12 +8,13 @@
 
   export interface CollapsibleProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCollapsibleProps> {
-    children?: Snippet<[api: CreateCollapsibleReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateCollapsibleReturn>;
+    children?: Snippet<[collapsible: CreateCollapsibleReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {collapsibleContext} from './context.svelte.js';
   import {createCollapsible} from './create-collapsible.svelte.js';
 
@@ -25,6 +26,7 @@
     defaultOpen,
     onOpenChange,
     onExitComplete,
+    asChild,
     children,
     ...props
   }: CollapsibleProps = $props();
@@ -44,6 +46,10 @@
   collapsibleContext.set(collapsible);
 </script>
 
-<div {...attrs}>
-  {@render children?.(collapsible)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, collapsible)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(collapsible)}
+  </div>
+{/if}

package/dist/collapsible/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 CollapsibleTriggerProps extends HtmlProps<'button'> {}
+  export interface CollapsibleTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {collapsibleContext} from './context.svelte.js';
 
-  let {children, ...props}: CollapsibleTriggerProps = $props();
+  let {asChild, children, ...props}: CollapsibleTriggerProps = $props();
 
   let collapsible = collapsibleContext.get();
 
   let attrs = $derived(mergeProps(props, collapsible.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/color-picker/area-background.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerAreaBackgroundProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerAreaPropsContext, colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerAreaBackgroundProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let areaProps = colorPickerAreaPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getAreaBackgroundProps(areaProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/color-picker/area-background.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AreaBackground: $$__sveltets_2_IsomorphicComponent<ColorPickerAreaBackgroundProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type AreaBackground = InstanceType<typeof AreaBackground>;
+export default AreaBackground;

package/dist/color-picker/area-thumb.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerAreaThumbProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerAreaPropsContext, colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerAreaThumbProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let areaProps = colorPickerAreaPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getAreaThumbProps(areaProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/color-picker/area-thumb.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AreaThumb: $$__sveltets_2_IsomorphicComponent<ColorPickerAreaThumbProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type AreaThumb = InstanceType<typeof AreaThumb>;
+export default AreaThumb;