ui-ingredients 0.0.24 → 0.0.26

package/dist/checkbox/indicator.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 CheckboxIndicatorProps extends HtmlProps<'span'> {}
+  export interface CheckboxIndicatorProps 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 {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,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 CheckboxLabelProps extends HtmlProps<'span'> {}
+  export interface CheckboxLabelProps 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 {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}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/checkbox/root.svelte

@@ -5,12 +5,15 @@
 
   export interface CheckboxProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateCheckboxProps> {
+    asChild?: Snippet<
+      [attrs: Omit<HtmlProps<'label'>, 'children'>, checkbox: 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 +29,7 @@
     readOnly,
     required,
     onCheckedChange,
+    asChild,
     children,
     ...props
   }: CheckboxProps = $props();
@@ -49,6 +53,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,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 ClipboardControlProps extends HtmlProps<'div'> {}
+  export interface ClipboardControlProps 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 {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,29 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/clipboard';
+  import type {Snippet} from 'svelte';
 
   export interface ClipboardIndicatorProps
-    extends Assign<HtmlProps<'span'>, Partial<IndicatorProps>> {}
+    extends Assign<HtmlProps<'div'>, Partial<IndicatorProps>> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </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}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/clipboard/input.svelte

@@ -1,18 +1,25 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ClipboardInputProps extends HtmlProps<'input'> {}
+  export interface ClipboardInputProps extends HtmlProps<'input'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+  }
 </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,28 @@
 <script lang="ts" module>
+  import type {Snippet} from 'svelte';
+
   import type {HtmlProps} from '../types.js';
 
-  export interface ClipboardLabelProps extends HtmlProps<'label'> {}
+  export interface ClipboardLabelProps 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 {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,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 {CreateClipboardProps, CreateClipboardReturn} from './create-clipboard.svelte.js';
 
   export interface ClipboardProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateClipboardProps> {
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, clipboard: 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 +24,7 @@
     value,
     timeout,
     onStatusChange,
+    asChild,
     children,
     ...props
   }: ClipboardProps = $props();
@@ -38,6 +42,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,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ClipboardTriggerProps extends HtmlProps<'button'> {}
+  export interface ClipboardTriggerProps 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 {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,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 CollapsibleContentProps extends HtmlProps<'div'> {}
+  export interface CollapsibleContentProps 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 {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 {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateCollapsibleProps,
@@ -8,12 +8,15 @@
 
   export interface CollapsibleProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCollapsibleProps> {
-    children?: Snippet<[api: CreateCollapsibleReturn]>;
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, collapsible: 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 +28,7 @@
     defaultOpen,
     onOpenChange,
     onExitComplete,
+    asChild,
     children,
     ...props
   }: CollapsibleProps = $props();
@@ -44,6 +48,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,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface CollapsibleTriggerProps extends HtmlProps<'button'> {}
+  export interface CollapsibleTriggerProps 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 {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;

package/dist/color-picker/area.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {AreaProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerAreaProps extends Assign<HtmlProps<'div'>, AreaProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerAreaPropsContext, colorPickerContext} from './context.svelte.js';
+
+  let {xChannel, yChannel, children, ...props}: ColorPickerAreaProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let areaProps: AreaProps = $derived({
+    xChannel,
+    yChannel,
+  });
+
+  let attrs = $derived(mergeProps(props, colorPicker.getAreaProps(areaProps)));
+
+  colorPickerAreaPropsContext.set(() => areaProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/color-picker/area.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 Area: $$__sveltets_2_IsomorphicComponent<ColorPickerAreaProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Area = InstanceType<typeof Area>;
+export default Area;

package/dist/color-picker/channel-input.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ChannelInputProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerChannelInputProps
+    extends Assign<HtmlProps<'input'>, ChannelInputProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {channel, orientation, ...props}: ColorPickerChannelInputProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      colorPicker.getChannelInputProps({
+        channel,
+        orientation,
+      }),
+    ),
+  );
+</script>
+
+<input {...attrs} />

package/dist/color-picker/channel-input.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 ChannelInput: $$__sveltets_2_IsomorphicComponent<ColorPickerChannelInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChannelInput = InstanceType<typeof ChannelInput>;
+export default ChannelInput;

package/dist/color-picker/channel-slider-label.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ChannelProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerChannelSliderLabelProps
+    extends Assign<HtmlProps<'div'>, ChannelProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerChannelSliderPropsContext, colorPickerContext} from './context.svelte.js';
+
+  let {channel, orientation, children, ...props}: ColorPickerChannelSliderLabelProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
+
+  let attrs = $derived(
+    mergeProps(props, colorPicker.getChannelSliderLabelProps(channelSliderProps)),
+  );
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>