ui-ingredients 0.0.25 → 0.0.26

package/README.md

@@ -41,7 +41,7 @@ npm install ui-ingredients
 - 🟢 Checkbox
 - 🟢 Clipboard
 - 🟢 Collapsible
-- ⚪ ColorPicker
+- 🟡 ColorPicker
 - 🟢 Combobox
 - 🟢 DatePicker
 - 🟢 Dialog

package/dist/accordion/item-content.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface AccordionItemContentProps extends HtmlProps<'div'> {}
+  export interface AccordionItemContentProps 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 {accordionContext, accordionItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: AccordionItemContentProps = $props();
+  let {asChild, children, ...props}: AccordionItemContentProps = $props();
 
   let accordion = accordionContext.get();
   let itemProps = accordionItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, accordion.getItemContentProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/accordion/item-indicator.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface AccordionIndicatorProps extends HtmlProps<'span'> {}
+  export interface AccordionIndicatorProps 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 {accordionContext, accordionItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: AccordionIndicatorProps = $props();
+  let {asChild, children, ...props}: AccordionIndicatorProps = $props();
 
   let accordion = accordionContext.get();
   let itemProps = accordionItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, accordion.getItemIndicatorProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/accordion/item-trigger.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface AccordionItemTriggerProps extends HtmlProps<'button'> {}
+  export interface AccordionItemTriggerProps 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 {accordionContext, accordionItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: AccordionItemTriggerProps = $props();
+  let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
 
   let accordion = accordionContext.get();
   let itemProps = accordionItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, accordion.getItemTriggerProps(itemProps)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/accordion/item.svelte

@@ -1,19 +1,20 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/accordion';
   import type {Snippet} from 'svelte';
 
   export interface AccordionItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {accordionContext, accordionItemPropsContext} from './context.svelte.js';
 
-  let {value, disabled, children, ...props}: AccordionItemProps = $props();
+  let {value, disabled, asChild, children, ...props}: AccordionItemProps = $props();
 
   let accordion = accordionContext.get();
   let itemProps = $derived({
@@ -27,6 +28,10 @@
   accordionItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/accordion/root.svelte

@@ -5,12 +5,15 @@
 
   export interface AccordionProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAccordionProps> {
+    asChild?: Snippet<
+      [attrs: Omit<HtmlProps<'div'>, 'children'>, accordion: CreateAccordionReturn]
+    >;
     children?: Snippet<[accordion: CreateAccordionReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {accordionContext} from './context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';
 
@@ -24,6 +27,7 @@
     collapsible,
     onFocusChange,
     onValueChange,
+    asChild,
     children,
     ...props
   }: AccordionProps = $props();
@@ -45,6 +49,10 @@
   accordionContext.set(accordion);
 </script>
 
-<div {...attrs}>
-  {@render children?.(accordion)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, accordion)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(accordion)}
+  </div>
+{/if}

package/dist/avatar/fallback.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 AvatarFallbackProps extends HtmlProps<'div'> {}
+  export interface AvatarFallbackProps 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 {avatarContext} from './context.svelte.js';
 
-  let {children, ...props}: AvatarFallbackProps = $props();
+  let {asChild, children, ...props}: AvatarFallbackProps = $props();
 
   let avatar = avatarContext.get();
 
   let attrs = $derived(mergeProps(props, avatar.getFallbackProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/avatar/image.svelte

@@ -1,18 +1,25 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface AvatarImageProps extends HtmlProps<'img'> {}
+  export interface AvatarImageProps extends HtmlProps<'img'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'img'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {avatarContext} from './context.svelte.js';
 
-  let {...props}: AvatarImageProps = $props();
+  let {asChild, ...props}: AvatarImageProps = $props();
 
   let avatar = avatarContext.get();
 
   let attrs = $derived(mergeProps(props, avatar.getImageProps()));
 </script>
 
-<img {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <img {...attrs} />
+{/if}

package/dist/avatar/root.svelte

@@ -1,27 +1,21 @@
 <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 CreateAvatarProps, type CreateAvatarReturn} from './create-avatar.svelte.js';
 
   export interface AvatarProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAvatarProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, avatar: CreateAvatarReturn]>;
     children?: Snippet<[avatar: CreateAvatarReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {avatarContext} from './context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
 
-  let {
-    /**/
-    id,
-    ids,
-    onStatusChange,
-    children,
-    ...props
-  }: AvatarProps = $props();
+  let {id, ids, onStatusChange, asChild, children, ...props}: AvatarProps = $props();
 
   let avatar = createAvatar({
     id,
@@ -34,6 +28,10 @@
   avatarContext.set(avatar);
 </script>
 
-<div {...attrs}>
-  {@render children?.(avatar)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, avatar)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(avatar)}
+  </div>
+{/if}

package/dist/carousel/indicator-group.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 CarouselIndicatorGroupProps extends HtmlProps<'div'> {}
+  export interface CarouselIndicatorGroupProps 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 {carouselContext} from './context.svelte.js';
 
-  let {children, ...props}: CarouselIndicatorGroupProps = $props();
+  let {asChild, children, ...props}: CarouselIndicatorGroupProps = $props();
 
   let carousel = carouselContext.get();
 
   let attrs = $derived(mergeProps(props, carousel.getIndicatorGroupProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/carousel/indicator.svelte

@@ -1,15 +1,18 @@
 <script lang="ts" module>
   import type {Assign, HtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/carousel';
+  import type {Snippet} from 'svelte';
 
-  export interface CarouselIndicatorProps extends Assign<HtmlProps<'button'>, IndicatorProps> {}
+  export interface CarouselIndicatorProps extends Assign<HtmlProps<'button'>, IndicatorProps> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {carouselContext} from './context.svelte.js';
 
-  let {index, readOnly, children, ...props}: CarouselIndicatorProps = $props();
+  let {index, readOnly, asChild, children, ...props}: CarouselIndicatorProps = $props();
 
   let carousel = carouselContext.get();
 
@@ -24,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/carousel/item-group.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 CarouselItemGroupProps extends HtmlProps<'div'> {}
+  export interface CarouselItemGroupProps 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 {carouselContext} from './context.svelte.js';
 
-  let {children, ...props}: CarouselItemGroupProps = $props();
+  let {asChild, children, ...props}: CarouselItemGroupProps = $props();
 
   let carousel = carouselContext.get();
 
   let attrs = $derived(mergeProps(props, carousel.getItemGroupProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/carousel/item.svelte

@@ -1,19 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/carousel';
   import type {Snippet} from 'svelte';
 
-  export interface CarouselItemProps
-    extends Assign<Omit<HtmlProps<'button'>, 'children'>, ItemProps> {
+  export interface CarouselItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {carouselContext} from './context.svelte.js';
 
-  let {index, children, ...props}: CarouselItemProps = $props();
+  let {index, asChild, children, ...props}: CarouselItemProps = $props();
 
   let carousel = carouselContext.get();
 
@@ -21,6 +21,10 @@
   let attrs = $derived(mergeProps(props, carousel.getItemProps({index})));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.(state)}
-</button>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/carousel/next-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface CarouselNextTriggerProps extends HtmlProps<'button'> {}
+  export interface CarouselNextTriggerProps 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 {carouselContext} from './context.svelte.js';
 
-  let {children, ...props}: CarouselNextTriggerProps = $props();
+  let {asChild, children, ...props}: CarouselNextTriggerProps = $props();
 
   let carousel = carouselContext.get();
 
   let attrs = $derived(mergeProps(props, carousel.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/carousel/prev-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface CarouselPrevTriggerProps extends HtmlProps<'button'> {}
+  export interface CarouselPrevTriggerProps 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 {carouselContext} from './context.svelte.js';
 
-  let {children, ...props}: CarouselPrevTriggerProps = $props();
+  let {asChild, children, ...props}: CarouselPrevTriggerProps = $props();
 
   let carousel = carouselContext.get();
 
   let attrs = $derived(mergeProps(props, carousel.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/carousel/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 {CreateCarouselProps, CreateCarouselReturn} from './create-carousel.svelte.js';
 
   export interface CarouselProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCarouselProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, carousel: 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,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 CarouselViewportProps extends HtmlProps<'div'> {}
+  export interface CarouselViewportProps 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 {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,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 CheckboxControlProps extends HtmlProps<'div'> {}
+  export interface CheckboxControlProps 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}: 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();