ui-ingredients 0.0.25 → 0.0.27

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

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerHiddenInputProps extends HtmlProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {...props}: ColorPickerHiddenInputProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getHiddenInputProps()));
+</script>
+
+<input {...attrs} />

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

package/dist/color-picker/index.d.ts

@@ -0,0 +1,26 @@
+export * as ColorPicker from './color-picker.js';
+export type { ColorPickerAreaBackgroundProps } from './area-background.svelte';
+export type { ColorPickerAreaThumbProps } from './area-thumb.svelte';
+export type { ColorPickerAreaProps } from './area.svelte';
+export type { ColorPickerChannelInputProps } from './channel-input.svelte';
+export type { ColorPickerChannelSliderLabelProps } from './channel-slider-label.svelte';
+export type { ColorPickerChannelSliderThumbProps } from './channel-slider-thumb.svelte';
+export type { ColorPickerChannelSliderTrackProps } from './channel-slider-track.svelte';
+export type { ColorPickerChannelSliderValueTextProps } from './channel-slider-value-text.svelte';
+export type { ColorPickerChannelSliderProps } from './channel-slider.svelte';
+export type { ColorPickerContentProps } from './content.svelte';
+export type { ColorPickerControlProps } from './control.svelte';
+export type { ColorPickerEyeDropperTriggerProps } from './eye-dropper-trigger.svelte';
+export type { ColorPickerFormatSelectProps } from './format-select.svelte';
+export type { ColorPickerFormatTriggerProps } from './format-trigger.svelte';
+export type { ColorPickerHiddenInputProps } from './hidden-input.svelte';
+export type { ColorPickerLabelProps } from './label.svelte';
+export type { ColorPickerPositionerProps } from './positioner.svelte';
+export type { ColorPickerProps } from './root.svelte';
+export type { ColorPickerSwatchGroupProps } from './swatch-group.svelte';
+export type { ColorPickerSwatchIndicatorProps } from './swatch-indicator.svelte';
+export type { ColorPickerSwatchTriggerProps } from './swatch-trigger.svelte';
+export type { ColorPickerSwatchProps } from './swatch.svelte';
+export type { ColorPickerTransparencyGridProps } from './transparency-grid.svelte';
+export type { ColorPickerTriggerProps } from './trigger.svelte';
+export type { ColorPickerValueTextProps } from './value-text.svelte';

package/dist/color-picker/index.js

@@ -0,0 +1 @@
+export * as ColorPicker from './color-picker.js';

package/dist/color-picker/label.svelte

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

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

package/dist/color-picker/positioner.svelte

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

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

package/dist/color-picker/root.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateColorPickerProps,
+    CreateColorPickerReturn,
+  } from './create-color-picker.svelte.js';
+
+  export interface ColorPickerProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateColorPickerProps> {
+    children?: Snippet<[colorPicker: CreateColorPickerReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+  import {createColorPicker} from './create-color-picker.svelte.js';
+
+  let {
+    id,
+    ids,
+    open,
+    name,
+    value,
+    format,
+    disabled,
+    required,
+    readOnly,
+    defaultOpen,
+    positioning,
+    onOpenChange,
+    closeOnSelect,
+    initialFocusEl,
+    onValueChange,
+    onValueChangeEnd,
+    onFocusOutside,
+    onFormatChange,
+    onInteractOutside,
+    onPointerDownOutside,
+    children,
+    ...props
+  }: ColorPickerProps = $props();
+
+  let colorPicker = createColorPicker({
+    id,
+    ids,
+    open,
+    name,
+    value,
+    format,
+    disabled,
+    required,
+    readOnly,
+    defaultOpen,
+    positioning,
+    onOpenChange,
+    closeOnSelect,
+    initialFocusEl,
+    onValueChange,
+    onValueChangeEnd,
+    onFocusOutside,
+    onFormatChange,
+    onInteractOutside,
+    onPointerDownOutside,
+  });
+
+  let attrs = $derived(mergeProps(props, colorPicker.getRootProps()));
+
+  colorPickerContext.set(colorPicker);
+</script>
+
+<div {...attrs}>
+  {@render children?.(colorPicker)}
+</div>

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

package/dist/color-picker/swatch-group.svelte

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

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

package/dist/color-picker/swatch-indicator.svelte

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

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

package/dist/color-picker/swatch-trigger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {SwatchTriggerProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerSwatchTriggerProps
+    extends Assign<HtmlProps<'button'>, Pick<SwatchTriggerProps, 'disabled'>> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
+
+  let {disabled, children, ...props}: ColorPickerSwatchTriggerProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps = colorPickerSwatchPropsContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      colorPicker.getSwatchTriggerProps({
+        value: swatchProps.value,
+        disabled,
+      }),
+    ),
+  );
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

package/dist/color-picker/swatch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {SwatchProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerSwatchProps extends Assign<HtmlProps<'div'>, SwatchProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
+
+  let {value, respectAlpha, children, ...props}: ColorPickerSwatchProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps: SwatchProps = $derived({
+    value,
+    respectAlpha,
+  });
+
+  let attrs = $derived(mergeProps(props, colorPicker.getSwatchProps(swatchProps)));
+
+  colorPickerSwatchPropsContext.set(() => swatchProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

package/dist/color-picker/transparency-grid.svelte

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

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

package/dist/color-picker/trigger.svelte

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

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

package/dist/color-picker/value-text.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface ColorPickerValueTextProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerValueTextProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(mergeProps(props, colorPicker.getValueTextProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {colorPicker.valueAsString}
+  {/if}
+</div>

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

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

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