ui-ingredients 0.0.38 → 0.0.40

package/README.md

@@ -2,6 +2,8 @@
 
 Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
 
+> ⚠️ This project is in early development. Feel free to use it, and contributions are welcome. Use with caution!
+
 ## Installation
 
 ```bash

package/dist/accordion/item-content.svelte

@@ -1,32 +1,42 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface AccordionItemContentProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './context.svelte.js';
-
-  let {asChild, children, ...props}: AccordionItemContentProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-
-  let mergedProps = $derived(
-    mergeProps(props, accordion.getItemContentProps(itemProps)),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AccordionItemContentProps
+    extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: AccordionItemContentProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+  let itemsState = $derived(accordion.getItemState(itemProps));
+  let presence = createPresence({
+    get present() {
+      return itemsState.expanded;
+    },
+  });
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      accordion.getItemContentProps(itemProps),
+      presence.getPresenceProps(),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div use:presence.ref {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/accordion/item-indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface AccordionIndicatorProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface AccordionIndicatorProps
+    extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/accordion/item-trigger.svelte

@@ -1,32 +1,31 @@
-<script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
-
-  export interface AccordionItemTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './context.svelte.js';
-
-  let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-
-  let mergedProps = $derived(
-    mergeProps(props, accordion.getItemTriggerProps(itemProps)),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <button type="button" {...mergedProps}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AccordionItemTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, accordion.getItemTriggerProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/accordion/item.svelte

@@ -1,43 +1,39 @@
-<script lang="ts" module>
-  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<[ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
-  import {
-    getAccordionContext,
-    setAccordionItemPropsContext,
-  } from './context.svelte.js';
-
-  let {asChild, children, ...props}: AccordionItemProps = $props();
-
-  let accordion = getAccordionContext();
-
-  let [itemProps, otherProps] = $derived(
-    createSplitProps<ItemProps>(['value', 'disabled'])(props),
-  );
-
-  let itemState = $derived(accordion.getItemState(itemProps));
-  let mergedProps = $derived(
-    mergeProps(otherProps, accordion.getItemProps(itemProps)),
-  );
-
-  setAccordionItemPropsContext(() => itemProps);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.(itemState)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/accordion';
+
+  export interface AccordionItemProps
+    extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {
+    getAccordionContext,
+    setAccordionItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: AccordionItemProps = $props();
+
+  let accordion = getAccordionContext();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['value', 'disabled'])(props),
+  );
+
+  let itemState = $derived(accordion.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(otherProps, accordion.getItemProps(itemProps)),
+  );
+
+  setAccordionItemPropsContext(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/accordion/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateAccordionProps,
     CreateAccordionReturn,
   } from './create-accordion.svelte.js';
 
   export interface AccordionProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateAccordionProps> {
-    asChild?: AsChild<CreateAccordionReturn>;
-    children?: Snippet<[CreateAccordionReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateAccordionReturn>,
+      CreateAccordionProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/avatar/fallback.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface AvatarFallbackProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface AvatarFallbackProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/avatar/image.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface AvatarImageProps extends HTMLProps<'img'> {
-    asChild?: AsChild;
-  }
+  export interface AvatarImageProps extends HtmlIngredientProps<'img'> {}
 </script>
 
 <script lang="ts">

package/dist/avatar/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import {
     type CreateAvatarProps,
     type CreateAvatarReturn,
   } from './create-avatar.svelte.js';
 
   export interface AvatarProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateAvatarProps> {
-    asChild?: AsChild<CreateAvatarReturn>;
-    children?: Snippet<[CreateAvatarReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateAvatarReturn>,
+      CreateAvatarProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/carousel/indicator-group.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CarouselIndicatorGroupProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface CarouselIndicatorGroupProps
+    extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/indicator.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/carousel';
 
   export interface CarouselIndicatorProps
-    extends Assign<HTMLProps<'button'>, IndicatorProps> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'button'>, IndicatorProps> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/item-group.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CarouselItemGroupProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface CarouselItemGroupProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/item.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/carousel';
-  import type {Snippet} from 'svelte';
 
   export interface CarouselItemProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, ItemProps> {
-    asChild?: AsChild<ItemState>;
-    children?: Snippet<[ItemState]>;
-  }
+    extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/next-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CarouselNextTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface CarouselNextTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/prev-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CarouselPrevTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface CarouselPrevTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateCarouselProps,
     CreateCarouselReturn,
   } from './create-carousel.svelte.js';
 
   export interface CarouselProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateCarouselProps> {
-    asChild?: AsChild<CreateCarouselReturn>;
-    children?: Snippet<[CreateCarouselReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateCarouselReturn>,
+      CreateCarouselProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/carousel/viewport.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CarouselViewportProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface CarouselViewportProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/control.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CheckboxControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface CheckboxControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/hidden-input.svelte

@@ -1,18 +1,23 @@
 <script lang="ts" module>
-  import type {HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CheckboxHiddenInputProps extends HTMLProps<'input'> {}
+  export interface CheckboxHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {getCheckboxContext} from './context.svelte.js';
 
-  let {...props}: CheckboxHiddenInputProps = $props();
+  let {asChild, ...props}: CheckboxHiddenInputProps = $props();
 
   let checkbox = getCheckboxContext();
 
   let mergedProps = $derived(mergeProps(props, checkbox.getHiddenInputProps()));
 </script>
 
-<input {...mergedProps} />
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/checkbox/indicator.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CheckboxIndicatorProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface CheckboxIndicatorProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CheckboxLabelProps extends HTMLProps<'span'> {
-    asChild?: AsChild;
-  }
+  export interface CheckboxLabelProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateCheckboxProps,
     CreateCheckboxReturn,
   } from './create-checkbox.svelte.js';
 
   export interface CheckboxProps
-    extends Assign<Omit<HTMLProps<'label'>, 'children'>, CreateCheckboxProps> {
-    asChild?: AsChild<CreateCheckboxReturn>;
-    children?: Snippet<[CreateCheckboxReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'label', CreateCheckboxReturn>,
+      CreateCheckboxProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/control.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ClipboardControlProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface ClipboardControlProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/indicator.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/clipboard';
 
   export interface ClipboardIndicatorProps
-    extends Assign<HTMLProps<'span'>, Partial<IndicatorProps>> {
-    asChild?: AsChild;
-  }
+    extends Assign<HtmlIngredientProps<'span'>, Partial<IndicatorProps>> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/input.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ClipboardInputProps extends HTMLProps<'input'> {
-    asChild?: AsChild;
-  }
+  export interface ClipboardInputProps extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/label.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ClipboardLabelProps extends HTMLProps<'label'> {
-    asChild?: AsChild;
-  }
+  export interface ClipboardLabelProps extends HtmlIngredientProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/root.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
-  import type {AsChild, Assign, HTMLProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateClipboardProps,
     CreateClipboardReturn,
   } from './create-clipboard.svelte.js';
 
   export interface ClipboardProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateClipboardProps> {
-    asChild?: AsChild<CreateClipboardReturn>;
-    children?: Snippet<[CreateClipboardReturn]>;
-  }
+    extends Assign<
+      HtmlIngredientProps<'div', CreateClipboardReturn>,
+      CreateClipboardProps
+    > {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ClipboardTriggerProps extends HTMLProps<'button'> {
-    asChild?: AsChild;
-  }
+  export interface ClipboardTriggerProps
+    extends HtmlIngredientProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/collapsible/content.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-  import type {AsChild, HTMLProps} from '../types.js';
+  import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CollapsibleContentProps extends HTMLProps<'div'> {
-    asChild?: AsChild;
-  }
+  export interface CollapsibleContentProps extends HtmlIngredientProps<'div'> {}
 </script>
 
 <script lang="ts">