ui-ingredients 0.0.25 → 0.0.27

package/README.md

@@ -1,80 +1,80 @@
-# UI Ingredients
-
-Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
-
-## Installation
-
-```bash
-npm install ui-ingredients
-```
-
-## Usage
-
-```svelte
-<script>
-  import {Clipboard} from 'ui-ingredients';
-
-  let {data} = $props();
-</script>
-
-<Clipboard.Root value={data.token}>
-  <Clipboard.Label>Token</Clipboard.Label>
-  <Clipboard.Control>
-    <Clipboard.Input />
-    <Clipboard.Trigger>
-      <Clipboard.Indicator copied>
-        <CheckIcon />
-      </Clipboard.Indicator>
-      <Clipboard.Indicator>
-        <CopyIcon />
-      </Clipboard.Indicator>
-    </Clipboard.Trigger>
-  </Clipboard.Control>
-</Clipboard.Root>
-```
-
-## Components
-
-- 🟢 Accordion
-- 🟢 Avatar
-- 🟢 Carousel
-- 🟢 Checkbox
-- 🟢 Clipboard
-- 🟢 Collapsible
-- ⚪ ColorPicker
-- 🟢 Combobox
-- 🟢 DatePicker
-- 🟢 Dialog
-- 🟢 Editable
-- 🟢 FileUpload
-- ⚪ FloatingPanel
-- 🟢 HoverCard
-- 🟢 Menu
-- 🟢 NumberInput
-- 🟢 Pagination
-- 🟢 PinInput
-- 🟢 Popover
-- 🟢 Portal
-- 🟡 Presence
-- 🟢 Progress
-- 🟢 QRCode
-- 🟢 RadioGroup
-- 🟢 RatingGroup
-- 🟢 Select
-- 🟢 SegmentGroup
-- 🟢 SignaturePad
-- 🟢 Slider
-- 🟢 Splitter
-- 🟢 Steps
-- 🟢 Switch
-- 🟢 Tabs
-- 🟢 TagsInput
-- 🟢 TimePicker
-- 🟢 Timer
-- 🟢 Toast
-- 🟢 ToggleGroup
-- 🟢 Tooltip
-- ⚪ Tour
-- 🟢 TreeView
-
-View components demo [here](https://ui-ingredients.vercel.app/)
+# UI Ingredients
+
+Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
+
+## Installation
+
+```bash
+npm install ui-ingredients
+```
+
+## Usage
+
+```svelte
+<script>
+  import {Clipboard} from 'ui-ingredients';
+
+  let {data} = $props();
+</script>
+
+<Clipboard.Root value={data.token}>
+  <Clipboard.Label>Token</Clipboard.Label>
+  <Clipboard.Control>
+    <Clipboard.Input />
+    <Clipboard.Trigger>
+      <Clipboard.Indicator copied>
+        <CheckIcon />
+      </Clipboard.Indicator>
+      <Clipboard.Indicator>
+        <CopyIcon />
+      </Clipboard.Indicator>
+    </Clipboard.Trigger>
+  </Clipboard.Control>
+</Clipboard.Root>
+```
+
+## Components
+
+- 🟢 Accordion
+- 🟢 Avatar
+- 🟢 Carousel
+- 🟢 Checkbox
+- 🟢 Clipboard
+- 🟢 Collapsible
+- ⚪ ColorPicker
+- 🟢 Combobox
+- 🟢 DatePicker
+- 🟢 Dialog
+- 🟢 Editable
+- 🟢 FileUpload
+- ⚪ FloatingPanel
+- 🟢 HoverCard
+- 🟢 Menu
+- 🟢 NumberInput
+- 🟢 Pagination
+- 🟢 PinInput
+- 🟢 Popover
+- 🟢 Portal
+- 🟡 Presence
+- 🟢 Progress
+- 🟢 QRCode
+- 🟢 RadioGroup
+- 🟢 RatingGroup
+- 🟢 Select
+- 🟢 SegmentGroup
+- 🟢 SignaturePad
+- 🟢 Slider
+- 🟢 Splitter
+- 🟢 Steps
+- 🟢 Switch
+- 🟢 Tabs
+- 🟢 TagsInput
+- 🟢 TimePicker
+- 🟢 Timer
+- 🟢 Toast
+- 🟢 ToggleGroup
+- 🟢 Tooltip
+- ⚪ Tour
+- 🟢 TreeView
+
+View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/accordion/item-content.svelte

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

package/dist/accordion/item-trigger.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface AccordionItemTriggerProps extends HtmlProps<'button'> {}
+  export interface AccordionItemTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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 +18,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 {AsChild, Assign, 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?: AsChild;
     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

@@ -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 {CreateAccordionProps, CreateAccordionReturn} from './create-accordion.svelte.js';
 
   export interface AccordionProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAccordionProps> {
+    asChild?: AsChild<GenericHtmlProps, 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 +25,7 @@
     collapsible,
     onFocusChange,
     onValueChange,
+    asChild,
     children,
     ...props
   }: AccordionProps = $props();
@@ -45,6 +47,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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface AvatarFallbackProps extends HtmlProps<'div'> {}
+  export interface AvatarFallbackProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </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}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/avatar/image.svelte

@@ -1,18 +1,24 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface AvatarImageProps extends HtmlProps<'img'> {}
+  export interface AvatarImageProps extends HtmlProps<'img'> {
+    asChild?: AsChild<HtmlProps<'img'>>;
+  }
 </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 {AsChild, 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?: AsChild<GenericHtmlProps, 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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface CarouselIndicatorGroupProps extends HtmlProps<'div'> {}
+  export interface CarouselIndicatorGroupProps 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}: 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,17 @@
 <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/carousel';
 
-  export interface CarouselIndicatorProps extends Assign<HtmlProps<'button'>, IndicatorProps> {}
+  export interface CarouselIndicatorProps extends Assign<HtmlProps<'button'>, IndicatorProps> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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 +26,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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface CarouselItemGroupProps extends HtmlProps<'div'> {}
+  export interface CarouselItemGroupProps 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}: 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 {AsChild, 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?: AsChild<GenericHtmlProps, 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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface CarouselNextTriggerProps extends HtmlProps<'button'> {}
+  export interface CarouselNextTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface CarouselPrevTriggerProps extends HtmlProps<'button'> {}
+  export interface CarouselPrevTriggerProps extends HtmlProps<'button'> {
+    asChild?: AsChild<HtmlProps<'button'>>;
+  }
 </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}