ui-ingredients 0.0.25 → 0.0.27

package/dist/hover-card/arrow.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface HoverCardArrowProps extends HtmlProps<'div'> {}
+  export interface HoverCardArrowProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {hoverCardContext} from './context.svelte.js';
 
-  let {children, ...props}: HoverCardArrowProps = $props();
+  let {asChild, children, ...props}: HoverCardArrowProps = $props();
 
   let hoverCard = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, hoverCard.getArrowProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

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

package/dist/hover-card/positioner.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface HoverCardPositionerProps extends HtmlProps<'div'> {}
+  export interface HoverCardPositionerProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {hoverCardContext} from './context.svelte.js';
 
-  let {children, ...props}: HoverCardPositionerProps = $props();
+  let {asChild, children, ...props}: HoverCardPositionerProps = $props();
 
   let hoverCard = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, hoverCard.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './carousel/index.js';
 export * from './checkbox/index.js';
 export * from './clipboard/index.js';
 export * from './collapsible/index.js';
+export * from './color-picker/index.js';
 export * from './combobox/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
@@ -38,3 +39,4 @@ export * from './toast/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';
 export * from './tree-view/index.js';
+export { mergeProps } from './utils.svelte.js';

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './carousel/index.js';
 export * from './checkbox/index.js';
 export * from './clipboard/index.js';
 export * from './collapsible/index.js';
+export * from './color-picker/index.js';
 export * from './combobox/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
@@ -38,3 +39,4 @@ export * from './toast/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';
 export * from './tree-view/index.js';
+export { mergeProps } from './utils.svelte.js';

package/dist/menu/arrow-tip.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuArrowTipProps extends HtmlProps<'div'> {}
+  export interface MenuArrowTipProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuArrowTipProps = $props();
+  let {asChild, children, ...props}: MenuArrowTipProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getArrowTipProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/menu/arrow.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuArrowProps extends HtmlProps<'div'> {}
+  export interface MenuArrowProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuArrowProps = $props();
+  let {asChild, children, ...props}: MenuArrowProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getArrowProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

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

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

package/dist/menu/indicator.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuIndicatorProps extends HtmlProps<'span'> {}
+  export interface MenuIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuIndicatorProps = $props();
+  let {asChild, children, ...props}: MenuIndicatorProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getIndicatorProps()));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/menu/item-group-label.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuItemGroupLabelProps extends HtmlProps<'span'> {}
+  export interface MenuItemGroupLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuItemGroupLabelProps = $props();
+  let {asChild, children, ...props}: MenuItemGroupLabelProps = $props();
 
   let menu = menuContext.get();
   let itemGroupProps = menuItemGroupPropsContext.get();
@@ -23,6 +25,10 @@
   );
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/menu/item-group.svelte

@@ -1,17 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/menu';
 
-  export interface MenuItemGroupProps
-    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+  export interface MenuItemGroupProps extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
+  import {createUniqueId, mergeProps} from '../utils.svelte.js';
   import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
 
-  let {id, children, ...props}: MenuItemGroupProps = $props();
+  let {id, asChild, children, ...props}: MenuItemGroupProps = $props();
 
   let menu = menuContext.get();
 
@@ -26,6 +26,10 @@
   menuItemGroupPropsContext.set(() => itemGroupProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/item.svelte

@@ -1,18 +1,20 @@
 <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/menu';
   import type {Snippet} from 'svelte';
 
   export interface MenuItemProps 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 {menuContext} from './context.svelte.js';
 
-  let {value, valueText, disabled, closeOnSelect, children, ...props}: MenuItemProps = $props();
+  let {value, valueText, disabled, closeOnSelect, asChild, children, ...props}: MenuItemProps =
+    $props();
 
   let menu = menuContext.get();
   let itemProps = $derived({
@@ -26,6 +28,10 @@
   let attrs = $derived(mergeProps(props, menu.getItemProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/menu/option-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 MenuOptionItemIndicatorProps extends HtmlProps<'span'> {}
+  export interface MenuOptionItemIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuOptionItemIndicatorProps = $props();
+  let {asChild, children, ...props}: MenuOptionItemIndicatorProps = $props();
 
   let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
@@ -16,6 +18,10 @@
   let attrs = $derived(mergeProps(props, menu.getItemIndicatorProps(optionItemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/menu/option-item-text.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuOptionItemTextProps extends HtmlProps<'span'> {}
+  export interface MenuOptionItemTextProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuOptionItemTextProps = $props();
+  let {asChild, children, ...props}: MenuOptionItemTextProps = $props();
 
   let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
@@ -16,10 +18,14 @@
   let attrs = $derived(mergeProps(props, menu.getItemTextProps(optionItemProps)));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {optionItemProps.valueText}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {optionItemProps.valueText}
+    {/if}
+  </span>
+{/if}

package/dist/menu/option-item.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 {OptionItemProps, OptionItemState} from '@zag-js/menu';
   import type {Snippet} from 'svelte';
 
   export interface MenuOptionItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, OptionItemProps> {
+    asChild?: AsChild<GenericHtmlProps, OptionItemState>;
     children?: Snippet<[state: OptionItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
 
   let {
@@ -21,6 +22,7 @@
     valueText,
     closeOnSelect,
     onCheckedChange,
+    asChild,
     children,
     ...props
   }: MenuOptionItemProps = $props();
@@ -42,6 +44,10 @@
   menuOptionItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/menu/positioner.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuPositionerProps extends HtmlProps<'div'> {}
+  export interface MenuPositionerProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuPositionerProps = $props();
+  let {asChild, children, ...props}: MenuPositionerProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/separator.svelte

@@ -1,20 +1,26 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface MenuSeparatorProps extends HtmlProps<'div'> {}
+  export interface MenuSeparatorProps extends HtmlProps<'div'> {
+    asChild?: AsChild;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuSeparatorProps = $props();
+  let {asChild, children, ...props}: MenuSeparatorProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getSeparatorProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}